Search code examples
javascriptjqueryajaxjsonp

jQuery JSONP AJAX requests sometimes fail with "TypeError: Cannot call method 'done' of undefined"

I'm trying to use jQuery JSONP AJAX requests in a bookmarklet and I'm finding that the requests work on some pages, but not on others. Here's example code:

jQuery.ajax({
    url: "http://echo.jsontest.com/key/value/one/two",
    type: "GET",
    dataType: "jsonp",
    cache: false
}).done( function(data){
    console.log(data);
}).fail(function(jqXHR, textStatus, errorThrown){
    console.log("errorThrown: " + errorThrown);
});

If you go to the following Amazon page:

http://www.amazon.com/dp/B00336EUTK?psc=1

And execute the above code in your console, you'll find that it works. However, if you go to this Amazon page:

http://www.amazon.com/dp/B00E5UHSYW?psc=1

And execute the above code in your console, the following error appears:

TypeError: Cannot call method 'done' of undefined

What is causing this problem and how can it be fixed?

EDIT: One interesting thing I've noticed is that on pages where the AJAX requests works, the callback parameter always seems to look like this:

callback=jQuery1640586556919850409_1390439428297

On pages where it fails, it always seems to look like this:

callback=jsonp1390439502398

I've tried this on a bunch of different Amazon pages and it seems like that behavior is consistent.

Maybe it's just a coincidence, but I thought it might be worth pointing out.

Solution

  • Different versions of jQuery

    Believe it or not, those two pages are using different versions of jQuery.

    You can determine this yourself by typing this into the console: $().jquery

    the first page is running v1.6.2

    the second page is running v1.2.6

    Looking at the jQuery docs for jQuery.ajax()(here), it looks like it was not added to jQuery until v1.5

    Hope that helps.