We Keep Coding

Why is this JSON String invalid? jQuery.parseJSON function throws invalid character

When trying to parse the JSON being returned by my Serlvet to my JSP page the following line of code is throwing a invalid character exception :
var obj = jQuery.parseJSON(data);
CLIENT SIDE CODE
<script type = "text/javascript">
function updateProgrammerDetails(site, Id) {
$.post('EngineAdminServlet',
{
action: "updateProgrammerMenu",
siteDetails: site,
ID: Id,
},
function(data, status){
var pid, name, sky, ip, eleven;
var obj = jQuery.parseJSON(data);
.........
}
}).fail(function(error) {
alert("Error retrieving details from server");
}); //end ajax call
}
</script>
JSON STRING GENERATED USING GSON
I've imported the GSON library in my Servlet class in order to convert my Java object 'ProgrammerForJSP' to a JSON string. This was recommended on other posts to avoid any typos when creating the JSON string myself. This is the string it returned:
{"ID":123,"siteName":"VEGAS","skyl":"WZ0019","ipAddress":"0.0.0.0","code":"L/BEG"}
SERVLET CODE
....
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
String gson = new Gson().toJson(myObject);
response.getWriter().write(gson);
} //end of method
I don't know if I'm missing a step or doing something wrong? My thought is that the IP address field might be throwing off the parser and breaking the code (hence the invalid character exception) because it contains period characters in it? I really have no idea.
EDIT
I'm using jquery-1.11.3.js

The error is because the $.post method has already detected a JSON response and parsed the result to an object for you. You are then trying to call parseJSON on an object instead of a JSON string, which results in the error you've seen. You simply need to remove the call to $.parseJSON. Try this:
function updateProgrammerDetails(site, Id) {
$.post('EngineAdminServlet', {
action: "updateProgrammerMenu",
siteDetails: site,
ID: Id,
}, function(data, status) {
var pid, name, sky, ip, eleven;
// work with the object in 'data' here, E.g:
console.log(data.ID, data.siteName); // = 123, 'VEGAS'
}).fail(function(error) {
alert("Error retrieving details from server");
}); //end ajax call
}

How to parse parameters that sent jquery table

I writing a simple Spring MVC web application that use JQuery DataTable on the client-side. DataTable using server-side processing mode. The DataTable make request with parameters(in my case):
draw:1
columns[0][data]:name
columns[0][name]:
columns[0][searchable]:true
columns[0][orderable]:true
columns[0][search][value]:
columns[0][search][regex]:false
columns[1][data]:type
columns[1][name]:
columns[1][searchable]:true
columns[1][orderable]:true
columns[1][search][value]:
columns[1][search][regex]:false
columns[2][data]:action
columns[2][name]:
columns[2][searchable]:true
columns[2][orderable]:true
columns[2][search][value]:
columns[2][search][regex]:false
order[0][column]:0
order[0][dir]:asc
start:0
length:10
search[value]:
search[regex]:false
I don't know how can i parse parameters like columns[i][data], columns[i][name], columns[i][searchable], etc. The reason is why, because I don't know how many table columns I will have. How to solve this problem?
This is my Spring controller:
#RequestMapping(value = "/getImageWrappers", method = RequestMethod.POST)
public String getImageWrappers(#RequestParam Integer draw,
#RequestParam Integer start,
#RequestParam Integer length,
#RequestParam(value = "search[value]") String searchText){
}
and DataTable configuration:
$('#imageWrapperTable').DataTable({
columns:[
{"data" : "name"},
{"data" : "type"},
{"data" : "action"}
],
"processing": true,
serverSide: true,
ajax: {
url: '/getImageWrappers.json',
type: 'POST'
}
});

I just figure it out by adding this code
$('#imageWrapperTable').DataTable({
columns:[
{"data" : "name"},
{"data" : "type"},
{"data" : "action"}
],
"processing": true,
serverSide: true,
ajax: {
url: '/getImageWrappers.json',
type: 'POST',
datatype: 'json',
data: function(d){
//add your custom param here
d.name = "zxbing";
//this will put all query strings to a json object string
return JSON.stringify(d);
}
}
});
In this way, you just need to transfer only a query string to JSON object on the server side.

In a json array I would do something like this with jquery:
function displayData(x) {
x.success(function(data) {
$.each(data.columns, function(i, paramenter) {
$.each(parameter, function(a, b) {
$('#somediv').append('column'+parameter+' -> data: '+b+' ');
});
});
}),
x.error(function(data) {
//error message
})
}//end displayData
So you can loop through your array, but you gotta play around with it, I haven't tested it but in general that is the idea. Hope it helps.

Spring MVC: Show data in a dialog after making an AJAX call

I am new to Spring and web technology.
I have an table which contains a column with hyperlink. When I click on the hyperlink of a row, I need to display that rows data along with other details in a dialog. My controller method returns a ModelAndView which contains the data I need to show and the display page.
Problems:
How to show the dialog? and
How to pass the data to the dialog?
Table.jsp
<script type="text/javascript">
function showDialog(ref, date) {
$ajax({
type: "POST",
url: "/example/show.htm",
data: {
ref: ref,
date: date
}
success: function(data) {
},
error: function(data) {
}
});
}
</script>
Mapping
#RequestMapping(value = "show.htm", method=RequestMethod.POST)
public ModelAndView show(#RequestParam("ref") String ref, #RequestParam("date") String date,
HttpServletRequest request, HttpServletResponse response) {
ModelAndView modelAndView = new ModelAndView();
try {
SampleDTO SampleDTO = new SampleDTO();
sampleDTO.setDate(sdf.parse(date));
sampleDTO.setRef(ref);
SampleDTO billDto = // server call modelAndView.addObject("showBill", sampleDto);
modelAndView.setViewName("Dialog");
}
return modelAndView;
}

Your code is wrong, you are messing things, if you want to use jQuery and ajax calls then don't use ModelAndView in your Spring controller. Instead of that, use the following and return your bean or dto as a json using Jackson library from Java:
Include this jar in your lib project folder:
http://www.java2s.com/Code/JarDownload/jackson/jackson-all-1.9.9.jar.zip
Java code:
#RequestMapping(value = "businessBill.htm", method = RequestMethod.POST)
#ResponseBody
public String handleBusinessBillDetails(#RequestParam("reference") String billReference, #RequestParam("invoiceDate") String billDate,
HttpServletRequest request, HttpServletResponse response) {
String json = null;
try {
//1. Create 'jackson' object mapper
ObjectMapper objectMapper = new ObjectMapper();
BusinessBillDTO businessBillDTO = new BusinessBillDTO();
businessBillDTO.setBillDate(sdf.parse(billDate));
businessBillDTO.setBillReference(billReference);
BusinessBillDTO billDto = accountStatementBO.getBusinessBillDetails(businessBillDTO);
//2. Convert your 'bean' or 'dto' as 'json' string
json = objectMapper.writeValueAsString(billDto);
} catch (Exception ex) {
LOGGER.error(ex);
}
return json;
}
Then, in Table.jsp put the div used in Dialog.jsp as hidden, this will be your modal dialog in future (note that there are some changes in the span tags also):
<div id="BusinessBill" style="display:none;">
<h2>Bill Details</h2>
<em>Business Ltd</em>
<div class="row">
<span class="spanAsLabel">Account number</span>
<span id="dlg-account-number" class="spanAsLabel"></span>
</div>
<div class="row">
<span class="spanAsLabel">Bill date</span>
<span id="dlg-bill-date" class="spanAsLabel"></span>
</div>
</div>
Now fix your getBusinessBill(..) method like this:
You can also use $.ajax and maybe handle more states like onerror and others but this way is simpler (at least for me, you just need to evaluate if the returned data is null or not and let know the user - if null - that something happened at server side, maybe showing an alert with a generic message) - please read comments.
function getBusinessBill(billReference, billInvoiceDate) {
$.post("/AccountStatement/businessBill.htm", {
reference: billReference,
invoiceDate: billInvoiceDate
}, function (data) {
/* You can implement more validations for 'data', in my case I just used these 'if' conditionals but can vary. */
if(data != null) { //returned 'data' is not 'null'
/* parse 'data' as 'json' object
* will be good to console.log(data) and take a look. */
var obj = $.parseJSON(data);
if(obj != {}) { //check if 'data' is not an empty 'json' object once transformed
//set the 'data' in the dialog
$('#dlg-account-number').text(obj.accountNumber);
$('#dlg-bill-date').text(obj.billDate);
/* open modal dialog, you can simulate it this way (for this case)
* but the correct way is to use 'jquery-ui' dialog or any plugin you prefer.
* At this point you will see the hidden 'div' in a visible way with your 'data'.
*/
$('#BusinessBill').fadeIn();
} else {
//show 'generic' message
alert('No results found.');
}
} else {
//show 'generic' message
alert('An error occurred, try again.');
}
});
}
Finally, if everything is correct, you will see at the same page (Table.jsp) the modal dialog with your data, all made by an ajax call to avoid redirection pages like (Table.jsp to => Dialog.jsp).

Pass json object to a play-framework action

I am currently using Play v1.2.3. I have an endpoint to which I want to send a json object which will be deserialized into a Java object. So, I have something that looks like this:
public class UserController extends Controller {
public static class FullName {
public String first;
public String last;
}
public static void putName( FullName name ) { ... }
}
##### routes
PUT /user/name UserController.putName
With that in place, I would hope to call the endpoint with the given javascript:
$.ajax({
type: "PUT",
data: { first: "Michael", last: "Bailey" },
url: "/user/name"
});
Unfortunately, with the above setup, it seems that play is not wanting to send the entire data object, but is instead attempting to populate two parameters (first and last). Is there a way to define the endpoint to consume the complete body directly, or does it have to be done by hand?

To cast the entire input body into a Model class:
public static void create(JsonObject body) {
CaseFolder caseFolder = new Gson().fromJson(body, CaseFolder.class);
caseFolder.user = getConnectedUser();
if(caseFolder.validateAndSave()) {
renderJSON(
new JSONSerializer()
.exclude("*.class")
.exclude("user")
.serialize(caseFolder));
} else
error();
}
Also, the above code takes the resulting Model object and serializes it back out to JSON as the response body.
If you want to just access certain fields within the JSON request, you can use:
public static void update(JsonObject body) {
try {
Long id = (long) body.get("id").getAsInt();
CaseFolder cf = CaseFolder.loadAndVerifyOwner(getConnectedUser(), id);
cf.number = body.get("number").getAsString();
cf.description = body.get("description").getAsString();
if(cf.validateAndSave())
ok();
else
error();
}
catch (NullIdException e) {error();}
catch (NotFoundException e) {notFound();}
catch (NotOwnerException e) {forbidden();}
catch (Exception e) {e.printStackTrace(); error();}
}

Play's action method parameter binding mechanism does not accept JSON. You need to bind it manually. In your example, the code could be something like:
public static void putName( String data ) {
FullName fname = new Gson().fromJSON(data, FullName.class);
...
}
Note, Gson is provided with play!framework distribution, so you are free to use it

With your settings play is expecting params with names "name.first" and "name.last" and you are sending "first" and "last". Try with this ajax post
$.ajax({
type: "PUT",
data: {
name: {
first: "Michael",
last: "Bailey"
}
},
url: "/user/name"
});

ajax success function is printing [object Object] instead of plain text. Why?

jQuery code:
function ajaxsubmit(){
$.ajax({
url: "/update",
type: "POST",
dataType: "html"
}).success(function(data) {
$('#result').html(data);
});
}
and my Java function:
public static Result ajaxupdate() {
String done = "very good";
return ok("very good").as("text/plain");
}
the alert is giving [object Object], instead of plain text "very good". why?

you want to use:
alert(JSON.stringify(data));
so you JavaScript will look like:
function ajaxsubmit(){
$.ajax({
url: "/update",
type: "POST",
}).complete(function(data) {
alert(JSON.stringify(data));
});
}
Your Java code looks like it is wrapping your string into an object before it sends it back to the client, JSON.stringify() will show you the structure of the object that is being returned and from there you can work out what property of the returned object contains your return variable (Probably something like data.data or data.return)

add dataType: "text" and change complete() with success()
function ajaxsubmit(){
$.ajax({
url: "/update",
type: "POST",
dataType: "html"
}).success(function(data) {
$('#result').html(data);
});
}

The jQuery documentation clearly answers your question. From http://api.jquery.com/jQuery.ajax/
complete(jqXHR, textStatus)
<...>
two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string
You can find more about jqXHR in documentation.
If you want to use the response string, consider opting for .success method. You may have to explicitly provide .contentType