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" })

Daniel Baird · Accepted Answer · 2013-11-21 05:34:49Z

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.

user2198393 · Accepted Answer · 2013-03-22 08:32:11Z

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');
      });

owksley · Accepted Answer · 2013-03-15 10:56:14Z

2

Check if your script is making an identical AJAX request more than once in succession.

I had a faulty event handler that fired off two requests at the same time and this caused the same issue.

(I am assuming you call $.ajaxSetup once): It looks like you intend to apply a cache buster for your ping calls, but doing it in $.ajaxSetup may have the opposite effect because the URL will be fixed for all subsequent requests.

answered Mar 15, 2013 at 10:56

owksley

1523 bronze badges

Collectives™ on Stack Overflow

jsonp inconsistent error: object is not a function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related