Question

I have a jQuery each loop that runs through a list of three JSONP urls, but, a random number of them just fail with the error: Uncaught TypeError: Property 'callback' of object [object Window] is not a function.

It is usually one or two and sometimes none but it is never all of them, I think that it has to do with the asynchronous part but I don’t know how to fix it.

Here is my code:

var feeds = ["JSONPUrl", "JSONPUrl", "JSONPUrl"];

$.each(feeds, function(index, feedUrl) {
    $.ajax({
    type: "GET",
    url: feedUrl,
    processData : true,
    data: {
        tagmode: "any",
        jsonp: "callback",
        callback: "callback"
    },
    jsonpCallback: "callback",
    dataType: "jsonp",
    success: function(data) {
        // Do some DOM manipulations with the data
    },
    error: function(x,y,z) {
    }
});
});​

Any ideas?

Answer 1

Your URL looks like ?callback=callback, because of the hard-coded callback property. Remove this, jQuery will automatically define temporary functions with random names for the JSONP callback.

data: {
    tagmode: "any",
    jsonp: "callback",     // <-- Do not forget to remove the trailing comma
    callback: "callback"   // <-- Remove this!
},
jsonpCallback: "callback", // <-- Remove this!

If you really want to execute a function called callback on success, include this in the success handler.

Regarding the comments: If your server expects the JSONP callback parameter to be called “jsonp” instead of “callback”, use:

$.ajax({
    ...
    jsonp: "jsonp"
    ...
});
// results in http://..../?jsonp=jQuery234254342random2342etc