getJSON fails, JSON validates

Question

I have a getJSON call which is inexplicably failing. The idea is, you click to submit a comment, a URL gets hit which determines if the comment is OK or has naughty words in it. The response is given in JSON form.

Here's the paired down JS that generates the call. The comment and the URL are already on the page, it grabs them and hits the URL:

FORM HTML:

<fieldset id="mg_comment_fieldset" class="inlineLabels">
<div class="ctrlHolder">
    <textarea id="id_comment" rows="10" cols="40" name="comment"></textarea>
</div>
<div class="form_block">
    <input type="hidden" name="next" value="" />
    <input id="mg_comment_url" type="hidden" name="comment_url" value="" />

    <input id="mg_comment_submit" type="submit" value="Remark" />
</div>
</fieldset>

SPECIFIC JS BLOCK THAT SENDS/READS RESPONSE:

$('input#mg_comment_submit').click(function(){
var comment = $("textarea#id_comment").val();
var comment_url = $('input#mg_comment_url').val();
$.getJSON(
    comment_url+"?callback=?&comment="+comment+"&next=",
    function(data){
        console.log(data);
        alert(data);
    });         
});

The JSON response:

[{"errors": {"comment": ["Weve detected that your submission contains words which violate our Terms and Conditions. Please remove them and resubmit test"]}}]

It's being returned as a mimetype of application/json. It validates in JSONLint. I also tried adding a couple AJAX functions to try to catch errors, and they're both silent. I can see the request going out in Firebug, and coming back as status 200 responses, which validate in JSONLint and which I can traverse just fine in the JSON tab of the response. If I put an alert before the getJSON, it runs; it's just that nothing inside of it runs. I also find that if I change .getJSON to .get, the alerts do run, suggesting it's something with the JSON. I'm out of ideas as to what the problem could be. Using Firefox 3.0.13.

Answer 1

Are you able to manually call your service without any errors? Have you tried using firebug and looked under XBR to see the post/response of the JSON payloads? I normally use .NET as my endpoints, and with .NET 3.5 I need to use content type "application/json; charset=utf-8".

Here is an example of a working JSON call I use in .NET with jQuery 1.3.2

$.ajax({   
    type: "POST",   
    url: "WebService1.ASMX/HelloWorld",   
    contentType: "application/json; charset=utf-8",   
    dataType: "json",   
    data: "{}",   
    success: function(res) {   
    // Do your work here.   
    // Remember, the results for a ASMX Web Service are wrapped   
    // within the object "d" by default. e.g. {"d" : "Hello World"}   
    }   
});

Answer 2

Have you tried it with $.ajax? You can then define both error and success callbacks and have better idea.

Answer 3

Can you try adding a global ajaxError function to log the error.

$.ajaxError( function(event, XMLHttpRequest, ajaxOptions, thrownError){
   console.log( thrownError );
 });

Answer 4

The querystring parameter "callback=?" comes into play if you are using cross-site scripting or jsonp, if you are posting the same server, you don't need to use that.

If you need or want to use that option, the server side code needs to come back with the callback function included in the json response.

Example:

$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"});

So either make a server side change if necessary or simple remove the "callback=?" parameter from the url.

Here's more info on jsonp