We Keep Coding

Data get from ajax null in jsp

I am able to get the data from ajax using system.out.println. However, I am unable to pass the data to servlet. It shows null always.
Here is my jQuery:
function expressCheck(number) {
var Self=[];
for(i=1;i<=<%=itemCodeList.size()%>;i++) Self[i-1] = document.getElementById("qtyGuestNumber_" + i).value;
$.ajax({
url: "ViewCategories.jsp",
data: {"expressData" : Self[number-1]}
});
};

Passing name from input to servlet

I have an input:
Now this is one input from a div with several different inputs, there is a button called add exp which generates a new div with those inputs by calling href="#" and then jquery does the rest, only the name changes to for example institutionName0, institutionName1 etc so the fields get distinct. In my servlet I want to be able to get the actual input name like institutionName0 so I can check how much of the same fields are generated and that I can put in different values in those different fields.

You can send your form values to Servlet as a jSon object using ajax.
//Example
function onSubmit(divName){
document.forms["formName"]["formName_currentAction"].value = divName;
var theForm = $("form[name=formName]");
var params = theForm.serialize();
$.ajax({
type:"POST",
url:actionURL,
cache: false,
data:params,
success:function(data, textStatus, XMLHttpRequest){
//do something here
},
error:function(XMLHttpRequest, textStatus, errorThrown){
}
});

Print AJAX Success Data?

I have a problem with printing Ajax success data.
success: function(data){
alert(need to print it here);
}
How it comes when I access
console.log(data.responseText);
{"success":false,"errors":{"text":["Some text.","some more text"]}}
How can I alert "Some text" or "some more text" now?
Thanks

alert data
success: function(data){
alert(data);
}
write to div tag
<div id="mydiv"></div>
success: function(data){
document.getElementById("mydiv").innerHTML += data;
}

Say you have a div to print the result like
<div id="res_div"></div>
You can access the contents by
console.log(data.responseText.errors.text);
You just try the following to print the content to that div
$("#res_div").text(data.responseText.errors.text);

Just drill down the data object to the errors.text array and loop through them, like this:
$.each(data.responseText.errors.text, function(index, item) {
alert(item);
});

Jquery autocomplete issue

I am new to jQuery and am trying to use the autocomplete widget with an ajax call to my database.
I am able to call the database, returned ArrayList of string values, and converted the response as a JSON object using org.codehaus.jackson.map.ObjectMapper (Do I need to use something else?).
When I put an altar, I can see results as pure strings with comma delimiter, but am not able to see a suggestion list with autocomplete.
Java code that returns the JSON object using org.codehaus.jackson.map.ObjectMapper:
response.setContentType("application/json");
response.setHeader("cache-control", "no-cache");
ArrayList polNo = doa.getPolicyData(ajaxForm.getPolicyNumber());
ObjectMapper mapper = new ObjectMapper();
OutputStream out = response.getOutputStream();
mapper.writeValue(out, polNo);
JavaScript code:
$( "#policyNumber" ).autocomplete({
source: function (request,response){
$.ajax({
type: "POST",
url: "/NB/AjaxSubmit.do",
dataType: "json",
data: {policyNumber: request.term},
success: function (data) {
alert(data);
}
});
},minLength: 3
});
alert data showing as : TMA412732,TMA412733,TMA412734
In above code, I have returned ArrayList of string values and was able to show in autopopulate. I have enhanced the above code to return list of person objects that has first name, last name etc. Now when user typing the firname or last name in the autopopulate , I would like to suggest First name, LastName Middle.
Could someone help to enhance this? Thanks!
success: function(data) {
response(data);//u forgot to set data on response
}

Change success function like
success: function (data) {
response(data); //u forgot to set data on response
}

Access model object with JSTL

I'm currently trying to get to grips with AJAX, and have a problem accessing the model object.
What my test code does is get the value of the selected from a drop down list, when the button is pressed it passes this value to AjaxTest(), which attaches the param to the model, but I can't get seem to output the model object - I was wondering why this might be?
There is definitely a value for param.
<div id="result"></div>
<script type="text/javascript">
var param = document.getElementById("blah").value;
var loadUrl = "/ajax/" + param;
$("#button").click(function(){
$.post(loadUrl, function(data){
alert("Data Loaded: " + data);
$("#result").html("<p>Param: ${output}</p>");
});
});
</script>
#RequestMapping(value = "/ajax/{param}", method = RequestMethod.POST)
public #ResponseBody String AjaxTest(#PathVariable String param, final ModelMap model){
model.addAttribute("output", param);
return param;
}

I think you are getting a bit mixed up with what is client side and server side.
You java looks correct, but your js is trying to access a jstl expression ( ${output} ). The jstl expression won't resolve when the page is rendered, which will be before the Ajax request/response has happened.
Your js needs to work with the variable 'data' which is the data that your java adds to the model. Something like this:
$("#result).html("<p>Param: " + data.output + "</p>");
This assumes the model is json
Hope this helps

When page is first loaded, the JSP code executes. This code contains the following lines:
$("#button").click(function(){
$.post(loadUrl, function(data){
alert("Data Loaded: " + data);
$("#result").html("<p>Param: ${output}</p>");
});
});
So, the JSP EL code is interpreted by the container, and ${output} is replaced by the value of the output attribute. Since this attribute is null, the following HTML code is generated and sent to the browser:
$("#button").click(function(){
$.post(loadUrl, function(data){
alert("Data Loaded: " + data);
$("#result").html("<p>Param: </p>");
});
});
When you click on the button, the above JavaScript code executes. It sends an AJAX request to the ajax URL, and when the response comes back, it executes the callback function:
alert("Data Loaded: " + data);
$("#result").html("<p>Param: </p>");
So, the data received from the server is displayed in an alert box, and then the content of the HTML element identified by "result" is replaced by <p>Param: </p>.