Why does a single Ajax call work fine, but consecutive Ajax calls fail?

Question

Setup:

I have a Datatable, whose each row is clickable. When a row is clicked, an ajax call is made which returns some data. Sometimes the ajax call takes a little time, depending on the amount of data being returned. It is all working fine.

Problem:

The problem occurs when the rows are clicked quickly, one after the other. In short, before the previous ajax call returns, if the row is clicked (i.e. a new ajax call is made), I get an error.

Uncaught TypeError: Property 'callback' of object [object Window] is not a function

(The ajax call returns a JSONP data)

It looks like somehow the ajax calls are getting mingled (?), but I am not sure of this. Can anyone please tell me why does this happen?

Please let me know if any more information is required to clarify the issue.

Thanks

EDIT 1:

Here is some ajax code:

            $.ajax({
                type: "GET",
                url: 'http://' + myserver + ':8080/someurl/' + my_param,
                contentType: "application/json",
                dataType: "jsonp",
                jsonpCallback: 'callback',
                success: function(data) {
                // Inside here, I am doing some Datatables stuff.
                var myTable = $('#my_table').dataTable( {
                        "bJQueryUI" : true,
                        "bSort" : false,
                        "bFilter" : false,
                        "bPaginate": true,
                        "bProcessing": true,
                        "bScrollCollapse": true,
                        "bInfo": false,
                        "bDestroy": true,
                        "aaData": samples,
                        "sEmptyTable": "No sample listings avaiable",
                        "iDisplayLength": number,
                        "bLengthChange": false,
                        "bAutoWidth": false,
                        .
                        .
                        .
                    }

EDIT 2:

Here is the class which is assigning the callback its name. If the default callback is null, then it assigns a default value, "callback". But looks like somehow the default callback is always null and hence it always assigns "callback".

public class MappingJacksonJsonpConverter extends MappingJacksonHttpMessageConverter {

    @Override
    protected void writeInternal(Object object, HttpOutputMessage outputMessage) throws IOException,
            HttpMessageNotWritableException {

        JsonEncoding encoding = getJsonEncoding(outputMessage.getHeaders().getContentType());
        JsonGenerator jsonGenerator = this.getObjectMapper()
                .getJsonFactory()
                .createJsonGenerator(outputMessage.getBody(), encoding);
        try {
            String jsonPadding = "callback";
            if (object instanceof JsonObject) {
                String jsonCallback = ((JsonObject) object).getJsonCallback();
                if (jsonCallback != null) {
                    jsonPadding = jsonCallback;
                }
            }
            jsonGenerator.writeRaw(jsonPadding);
            jsonGenerator.writeRaw("(");
            this.getObjectMapper().writeValue(jsonGenerator, object);
            jsonGenerator.writeRaw(")");
            jsonGenerator.flush();
        } catch (JsonProcessingException ex) {
            throw new HttpMessageNotWritableException("Could not write JSON: " + ex.getMessage(), ex);
        }
    }
}

And the above class is being referenced in mvc-servlet.xml as follows:

    <mvc:message-converters>
        <bean
            class="citygrid.feedmanager.web.converter.MappingJacksonJsonpConverter">
            <property name="supportedMediaTypes">
                <list>
                    <value>application/x-javascript</value>
                </list>
            </property>
        </bean>
    </mvc:message-converters>

Use synchronous ajax requests [Here](http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-request-are-done) — Alex Ball, Jul 16 '12 at 07:17
@AlexBall: As I mentioned in the question, I am returning JSONP data (cross-domain calls) which does not support synchronous calls. http://api.jquery.com/jQuery.ajax/ — Bhushan, Jul 16 '12 at 07:18
What are you using to perform your AJAX query? Could you paste your ajax code? — Scotty, Jul 16 '12 at 07:18
You can limit the number of ajax calls made at a time also post your code — Musa, Jul 16 '12 at 07:21
Have you tried with error:, succes: and complete: ? (success callback itself) — Alex Ball, Jul 16 '12 at 07:24
What happens if you remove the jsonpCallback: 'callback' parameter? All the callbacks are trying to use the same callback function name, so is that where the problem is? Using a generated name may avoid this perhaps? — Chris, Jul 16 '12 at 07:28
did u check where the error coming from? it is cause by undefined callback. perhaps it'll be assigned right after the request — stackunderflow, Jul 16 '12 at 07:30
`async:false` won't work with JSONP. Also it has nothing to do with server side. Chris is right: the problem is that all JSONP requests have the same callback. JQuery deletes the callback **after** JSONP returns. That's why if you fire two JSONPs quickly, the second one will try to fire `undefined` callback resulting in exception. — freakish, Jul 16 '12 at 07:32
@Chris: If I remove the `jsonpCallback: 'callback' parameter`, I get the exact same error: `Uncaught TypeError: Property 'callback' of object [object Window] is not a function ` — Bhushan, Jul 16 '12 at 07:33
@Bhushan That's impossible. Without the `jsonpCallback` line, jQuery doesn't even use property `callback` of `window`. Maybe stupid question, but did you clear browser cache? :) — freakish, Jul 16 '12 at 07:36
`jsonp` required some server side work, did you do this in your server side script ? — The Alpha, Jul 16 '12 at 08:28
If you are using same domain (not cross domain) then you can use `json` instead of `jsonp` and it'll make the thing easier. — The Alpha, Jul 16 '12 at 08:36

score 7 · Accepted Answer · answered Jul 16 '12 at 07:38

7

The problem is in how jQuery works with callback with JSONP. Here's the idea:

JSONP is fired;
Callback is set;
JSONP returns;
Callback is fired;
Callback is deleted;

Now everything works fine if you don't define custom jsonpCallback (by default jQuery assigns unique callback to each JSONP request). Now what happens if you do and you fire two JSONP request at the same time?

JSONP1 is fired;
Callback with name callback is set.
JSONP2 is fired;
Callback callback is overriden by JSONP2;
JSONP1 returns;
Callback callback is fired for JSONP1;
JSONP1 deletes callback;
JSONP2 returns;
JSONP2 tries to fire callback, but that is already deleted;
TypeError is thrown.

Simple solution is not to override jsonpCallback option.

answered Jul 16 '12 at 07:38

freakish

54,167
9
132
169

1

+1, That's the perfect solution IMO and jquery automatically defines a `callback` and removes it after completion. – The Alpha Jul 16 '12 at 07:39
freakish: Thanks a lot for the explanation. When you say ` not to override jsonpCallback option` what exactly do you mean? Not the define `jsonpCallback: 'callback',` in the `$.ajax`? Can you please explain a bit? – Bhushan Jul 16 '12 at 16:31
@Bhushan Yeah, that's what I meant. – freakish Jul 16 '12 at 20:42
@freakish: I tried it, but as I said earlier, I am getting same error, `Uncaught TypeError: Property 'callback' of object [object Window] is not a function`. I also cleared the cache. But no luck. Any idea what might be going wrong? – Bhushan Jul 17 '12 at 20:45
@Bhushan Are you sure that the code you've shown us is causing the problem? If so, then this is all I can do for you. Sorry and good luck! – freakish Jul 17 '12 at 21:47
@freakish: I just found that there is some code written by somebody else, which is assigning the `callback`. I am updating the question with details in few minutes. – Bhushan Jul 17 '12 at 21:50
1

@Bhushan Sorry, I'm not a Java programmer and I don't understand the details of that code. But definetly the problem *is not* on client side, but on server side. You need to debug it and figure it out. Or ask another question with `Java` tag. :) – freakish Jul 17 '12 at 22:14

score 4 · Answer 2 · edited May 23 '17 at 12:03

4

As Alex Ball have suggested you need to put your AJAX requests in queue, so that they are executed one by one. It is very simple as shown here in a post in stackoverflow (yes it works for JSON-P also).

The second thing is error message Property 'callback' of object [object Window] is not a function is just because you dont have a global function named callback. Just define it like :

window.callback= function(responseText) {
    //alert(responseText);
};

Hope this helps.

edited May 23 '17 at 12:03

Community

1
1

answered Jul 16 '12 at 07:34

tusar

3,364
6
37
60

-1: This line: `because you dont have a global function named callback` is not true. JQuery is smart enough to automatically assign callback with name `callback`. – freakish Jul 16 '12 at 07:42

Why does a single Ajax call work fine, but consecutive Ajax calls fail?

2 Answers2

Linked