Question

So, I’ve been battling with Javascript for a little while now and I have a weird error which is probably something simple. I have an ajax request like so:

$.ajax({
    url: 'http://www.hahaha.com/api/v3/acts',
    crossDomain: true,
    jsonpCallback: 'handlejson',
    async: false,
    jsonp: 'callback',
    dataType: 'jsonp',
    type: 'GET',
    success: handleActs,
    error: handleError
});

Which works fine and calls the callback with no problems. Now, if I add this request directly underneath:

$.ajax({
    url: 'http://www.hahaha.com/api/v3/performances',
    crossDomain: true,
    async: false,
    jsonpCallback: 'handlejson',
    jsonp: 'callback',
    dataType: 'jsonp',
    type: 'GET',
    success: handlePerformances,
    error: handleError
});

I get a “parsererror” on the first request and the second one succeeds. Anyone have any ideas as to why it’s doing this? Can a jsonpCallback only have one request called on it?

Answer 1

I don’t think it works to have two AJAX calls referring to the same jsonpCallback – I think jQuery puts a callback function in the global namespace, then removes it when it’s called – so it won’t be around for the second set of loaded data. I wouldn’t have thought this would matter with async set to false, but it looks like it does.

At first I couldn’t figure out why you were setting jsonpCallback at all, but testing seems to indicate that the API you’re using strips anything other than [a-z] from the callback name :(. So you might try this with jsonpCallback set to 'handlejsona' in the first call and 'handlejsonb' in the second call.

This approach seems to work here: http://jsfiddle.net/nrabinowitz/H7zYt/