zero01alpha zero01alpha - 2 months ago 13
JSON Question

"no element found" error when using JSON stringify method in jQuery ajax call

I want to update a section of a page using ajax when an image is clicked. When the image is clicked I pull values from a jQuery DataTable to populate an object. Then I call my action and pass in a JSON string of the object using

JSON.stringify()
.

$("#image").click(function(e) {

data = {}

table = $("#myTable").dataTable();
$.each(table.fnGetData(), function(index, value) {
row = $(table.fnSettings().aoData[index].nTr);
data[row.find(".key")] = {
"val1": row.find(".val1").text(),
"val2": row.find(".val2").text(),
"val3": row.find(".val3").text(),
"val4": row.find(".val4").text(),
}
});

$.ajax({
url: "myAction",
contentType: "text/html",
data: {
json: JSON.stringify(data)
},
success: function(resp) {
alert(resp)
$("#myDiv").html(resp);
}
});

});


However, calling the
ajax
function results in an error in the javascript console that only says "no element found". When I check the network activity it tries to hit the correct url, but returns a
400 error
.

I am sparing the back end details because I believe something in the
stringify
method to be the culprit here because when I pass a string literal as the ajax data such as
data: {json: "foo"}
it calls my action with no problem whatsoever.

Answer

The solution was to specify the ajax method as POST by adding the following attribute to the ajax call.

method: "POST"

No idea why this makes it work, but it does.

Comments