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

Question

Setup:

I have a datatable, each one is interactive. When you click on a line, an ajax call is made, which returns some data. Sometimes ajax call takes a little time, depending on the amount of data returned. Everything is working fine.

Problem:

The problem arises when lines are quickly pressed one after another. In short, before the previous ajax call is returned, if I click on the line (i.e. a new ajax call will be made), I get an error.

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

(ajax call returns JSONP data)

It seems that for some reason ajax calls are mixed (?), But I'm not sure about that. Can someone please tell me why this is happening?

Please let me know if additional information is needed to clarify the problem.

thanks

EDIT 1:

Here is the 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 that assigns callback its name. If the default callback is null, it assigns a default callback. But it looks like the default callback is always zero by default, and therefore it always assigns a “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 this class refers to 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 how jQuery works with JSONP callbacks. Here's the idea:

• JSONP fired;
• Callback set;
• returns JSONP;
• A callback is called;
• The callback is deleted;

Now everything works fine if you do not define a custom jsonpCallback (by default, jQuery assigns a unique callback to each JSONP request). Now, what happens if you do this and run two JSONP requests at the same time?

• JSONP1 is launched;
• Set callback called callback .
• JSONP2 is running,
• The callback overridden by JSONP2;
• returns JSONP1;
• The callback fired for JSONP1;
• JSONP1 removes callback ;
• returns JSONP2;
• JSONP2 is trying to start callback , but it has already been removed;
• A TypeError is raised.

A simple solution is not to override the jsonpCallback parameter.

Answer 2

As Alex Ball suggested you queue your AJAX requests so that they are executed one by one. It is very simple, as shown by https://stackoverflow.com/a/3/2/16 (... yes, this works for JSON-P as well).

Secondly, the error message Property 'callback' of object [object Window] is not a function is that you do not have a global function called callback . Just define it as:

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

Hope this helps.