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>

Answer 1

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

1. JSONP is fired;
2. Callback is set;
3. JSONP returns;
4. Callback is fired;
5. 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?

1. JSONP1 is fired;
2. Callback with name callback is set.
3. JSONP2 is fired;
4. Callback callback is overriden by JSONP2;
5. JSONP1 returns;
6. Callback callback is fired for JSONP1;
7. JSONP1 deletes callback;
8. JSONP2 returns;
9. JSONP2 tries to fire callback, but that is already deleted;
10. TypeError is thrown.

Simple solution is not to override jsonpCallback option.

Answer 2

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.