0

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.

secondbreakfast
  • 4,194
  • 5
  • 47
  • 101
  • 1
    are you sure that the url is /myAction ? – Marcin Sep 26 '16 at 19:08
  • @MarcinC.yes, I am absolutely sure. When I pass a string literal as the json data it calls my action with no problem. – secondbreakfast Sep 26 '16 at 19:10
  • where exactly does that `element` error get thrown? Is `data` what you expect it to be? – charlietfl Sep 26 '16 at 19:10
  • 1
    Well, the 400 error is a back-end thing. If the browser console shows an HTTP request that you think looks OK, then you'll need to debug the server code. – Pointy Sep 26 '16 at 19:10
  • The culprit is content-type, instead of text/html have it as application/json – rushi Sep 26 '16 at 19:11
  • @Pointy but it never calls my server code, I have a break point set on the first line of my action. – secondbreakfast Sep 26 '16 at 19:11
  • 2
    But you said that there's a 400 error. – Pointy Sep 26 '16 at 19:12
  • 1
    that 400 comes from server not client – charlietfl Sep 26 '16 at 19:12
  • @rushi no, I don't think so - jQuery will turn the "data:" property value into a URL-encoded query string. *edit* though probably "text/html" is wrong; as Barmar says there's no need for "contentType" at all. – Pointy Sep 26 '16 at 19:12
  • Leave out the `contentType:` option. – Barmar Sep 26 '16 at 19:13
  • Leaving out the content type has the same effect. I suppose I will have to make double sure that no other code such as a filter is being called before it would get to my action code, I will report back – secondbreakfast Sep 26 '16 at 19:14
  • perhaps you are expecting a json payload...but that is not what will be sent the way you have it set up now – charlietfl Sep 26 '16 at 19:15
  • @charlietfl Nope, I am expecting html – secondbreakfast Sep 26 '16 at 19:16
  • 2
    I mean payload being sent to server, not the response – charlietfl Sep 26 '16 at 19:17
  • I just confirmed that it isn't hitting any type of filter code before my action, so the initial request must be getting denied by the server before anything I've created even happens. Again, I would like to emphasize that passing a string such as "foo" as the json data works just fine. – secondbreakfast Sep 26 '16 at 19:19
  • If you're getting a 400 error, that means that an HTTP request is being issued. Have you opened up the browser console to look at the request/response info? – Pointy Sep 26 '16 at 19:22
  • Ok, so the rabbit hole gets deeper...the status code isn't even a 400 everytime...sometimes there isnt even a status code and the response type is "plain"....ugh, this is sad. @Pointy what data should I be looking at in the request/response info? – secondbreakfast Sep 26 '16 at 19:32
  • The request info will show the outgoing headers and the query parameters. The response will show the contents of the server response, as well as the response headers and status code. – Pointy Sep 26 '16 at 19:39
  • Response headers: Connection: close Date: Mon, 26 Sep 2016 19:40:09 GMT Server: Apache-Coyote/1.1 Transfer-Encoding: chunked – secondbreakfast Sep 26 '16 at 19:41
  • Im definitely thinking malformed json http://stackoverflow.com/questions/19671317/400-bad-request-http-error-code-meaning but how could the JSON.stringify method silently create malformed json? – secondbreakfast Sep 26 '16 at 19:45
  • 1
    `JSON.stringify()` will not create malformed JSON. What's the `Content-Type` header in the response? What do your server logs say? – Pointy Sep 26 '16 at 19:50
  • @Pointy Apparently xml? Firebug has an XML tab in the response section that says "XML Parsing Error: syntax error Location: moz-nullprincipal:{43263100-2b2a-479c-a38d-d6acac47a39d} Line Number 1, Column 1: Reload the page to get source for: http://localhost:8080/myAction" Nothing even happens in my server logs, no activity from that request. – secondbreakfast Sep 26 '16 at 20:02

1 Answers1

0

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.

secondbreakfast
  • 4,194
  • 5
  • 47
  • 101