jsonp inconsistent error: object is not a function

Question

I'm trying to use jsonp with jQuery but I get inconsistent behaviors. Sometimes the script works, sometimes it does not; I don't really understand why.

This is the error that may be displayed by Chrome:

Uncaught TypeError: Property 'jQuery18208278296771459281_1362854738133' of object [object Object] is not a function

In the following example, I'm only trying to check whether the application is online or not. But this inconsistent behavior may happen on other similar ajax calls:

     $.ajaxSetup({
        error: function (req, status, ex) {},
        success: function (data, status, req) {},
        timeout: 2000,
        crossDomain: true,
        contentType: "application/json",
        dataType:"jsonp",
        url: "http://myUrl.com/ping.php?preventCache="+new Date()
    });
    return $.ajax();

The server side PHP file is pretty simple too:

<?php
header("Content-Type: application/javascript; charset=UTF-8");
echo $_GET['callback'];
?> ({ "status": "online" })

Answer 1

You will get this behaviour when your JSONP call times out (which is two seconds, according to your timeout: 2000 line), but the data arrives after the timeout has happened.

JSONP doesn't use a normal XmlHTTPRequest. To do JSONP, jQuery inserts a script tag into your document and makes a temporary function to handle the script tag loading (the function name is that long random string in the error message).

When your timeout occurs and the script hasn't finished loading yet, jQuery discards the temporary function. Sometime after that, the script tag finishes loading, and tries to invoke that function -- but it's too late, the function has been deleted. Hence the error.

Possibly you can get less errors by extending your timeout, but the basic problem is that you can't cancel the loading of a script tag. If it hasn't errored out, there's always the chance it'll take a bit longer than your timeout. As far as I know there's no neat solution for this. You can tell jQuery to use an explicitly named function as the JSONP callback instead of making its own, but then you'll need to keep track of whether the thing is timed out yourself. You could use CORS, which is another whole thing.

Probably your best bet is to live with it.

Answer 2

your question is not so clear , I was getting the same error when tried to use the same callback function name twice. in Any case this is how the jsonp should be called in jquery :

      var mycallback = 'c'+Math.floor((Math.random()*100000000)+1);
      $.ajax({
                   type: 'GET',
                    url: URL,
                    async: true,
                    jsonpCallback: mycallback,
                    contentType: "application/json",
                    dataType: 'jsonp'

       }).done(function(json){
           console.log(json);
                    callback(json);
       }).fail(function(f){
           console.log("f");
                    console.log(f.status);
       }).always(function(){
                   // console.log('complete');
      });