$.getJSON returning undefined to success callback in IE9 and below

Question

We've encountered an odd problem with a $.getJSON call which only seems to affect older versions of IE. Code is as follows:

var success = function (response) {
     // do stuff
}

$.getJSON(url, success);

Under Chrome, Firefox, IE10, this code works just fine - getJSON hits the URL (which is valid, and is not cross domain ), returns 200 OK and returns the data, which is passed through to the success function as you'd expect.

However under IE9 and below, the success callback is invoked but the response parameter passed through is undefined. By capturing the network traffic in IE Dev Tools I can see the call hitting the URL, returning 200 OK and returning valid JSON in the response body. So why is this coming out as undefined when it hits the success callback?

I've tried using the $.ajax call instead with appropriate parameters, and I see the same behaviour. Code below:

$.ajax({
    dataType: "json",
    url: url,
    success: success
};

We're using jQuery 1.7.2 (one of the libraries we've got on the page is broken under the newer version of jQuery, hence the old version).

EDIT: Just tried updating the page to use jQuery 1.10.1, doesn't fix the issue.

EDIT 2: I've confirmed that the JSON data being returned is valid via jsonlint.com so that isn't the issue either.

Answer 1

If it is caching the result then set the cache to false before the request:

$.ajaxSetup({ cache: false });

If it is caching the result then use ajax instead of getJSON:

$.ajax({
    url: 'data.json',
    cache: false,
    dataType: 'json',
    success: function(data) {
        console.log('success', data);
    },
    error: function (request, status, error) {
        console.log('error', error);
    }
});

If the mime type is wrong then specify the dataType:

$.getJSON('data.json', 'json', function(data) {
    console.log('getJSON', data);
});

If the mime type is wrong then specify the dataType on the server:

header('Content-type: application/json');

If it's a variable conflict then rename your callback variable:

var success = function (newname) {
    console.log('success', newname);
}
$.getJSON(url, success);

If it's cross origin request then you can force jQuery to use it with:

$.support.cors = true;

Answer 2

Turns out this wasn't a jQuery issue whatsoever - it was something to do with the content-type headers being returned by the server. For whatever reason (still not clear exactly what changed to cause the issue) the media type being returned by the server (despite being plain old application/json) wasn't being interpreted properly by jQuery under the older versions of IE. I made a change to the server side code to return a vendor specific JSON content type and the code now works again.

EDIT: It occurs to me that one of the changes server side was an upgrade from version 0.17 to version 0.20 of the Nancy framework we use to serve the requests. I'm guessing this may have affected the headers in some subtle way, though I still haven't tracked down exactly how.

Answer 3

A little late to the game but I'll share my solution for anyone stumbling upon this thread:

I had the same issue, but the cause turned out to be a little different. I was passing tags to the getJSON url that contained special characters. Now Chrome silently converts these characters for me, but IE does not, which caused the server to return empty data.