jQuery ajax (jsonp) ignores a timeout and doesn't fire the error event

ajax, error-handling, jquery, jsonp, timeout

Solution

jQuery 1.5 and higher have better support for error handling with JSONP requests. However, you need to use the `$.ajax` method instead of `$.getJSON`. For me, this works:

var req = $.ajax({
    url : url,
    dataType : "jsonp",
    timeout : 10000
});

req.success(function() {
    console.log('Yes! Success!');
});

req.error(function() {
    console.log('Oh noes!');
});

The timeout seems to do the trick and call the error handler, when there is no successful request after 10 seconds.

I did a little blogpost on this subject as well.

Problem

To add some basic error handling, I wanted to rewrite a piece of code that used jQuery's $.getJSON to pull in some photo's from Flickr. The reason for doing this is that $.getJSON doesn't provide error handling or work with timeouts. Since $.getJSON is just a wrapper around $.ajax I decided to rewrite the thing and surprise surprise, it works flawlessly. Now the fun starts though. When I deliberately cause a 404 (by changing the URL) or cause the network to timeout (by not being hooked up to the interwebs), the error event doesn't fire, at all. I'm at a loss as to what I'm doing wrong. Help is much appreciated. Here's the code: ``` $(document).ready(function(){ // var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne"; // correct URL var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne_______"; // this should throw a 404 $.ajax({ url: jsonFeed, data: { "lang" : "en-us", "format" : "json", "tags" : "sunset" }, dataType: "jsonp", jsonp: "jsoncallback", timeout: 5000, success: function(data, status){ $.each(data.items, function(i,item){ $("<img>").attr("src", (item.media.m).replace("_m.","_s.")) .attr("alt", item.title) .appendTo("ul#flickr") .wrap("<li><a href=\"" + item.link + "\"></a></li>"); if (i == 9) return false; }); }, error: function(XHR, textStatus, errorThrown){ alert("ERREUR: " + textStatus); alert("ERREUR: " + errorThrown); } }); }); ``` I'd like to add that this question was asked when jQuery was at version 1.4.2

Original source