Jquery ajax post canceled

Question

I want to track mouse click events on a set of user interface components across multiple pages. To do this, I use the following jquery / ajax call (trimmed u):

1.Ajax call that will add a click record.

myClickLogger = { endpoint: '/path/to/my/logging/endpoint.html', logClickEvent: function(clickCode) { $.ajax({ 'type': 'POST', 'url': this.endpoint, 'async': true, 'cache': false, 'global': false, 'data': { 'clickCode':clickCode }, 'error': function(xhr,status,err){ alert("DEBUG: status"+status+" \nError:"+err); }, 'success': function(data){ if(data.status!=200){ alert("Error occured!"); } } }); } }; 

2.JQuery click event, which will call ajax logger (clickCode is the identifier for which the button / image is clicked):

 $(document).ready(function() { $(".myClickEvent[clickName]").click(function() { var clickCode = $(this).attr("clickName"); myClickLogger.logClickEvent(clickCode); }); }); 

The above ajax (1.) call is “canceled” by the browser whenever a click on a button is tracked, it goes to a new page.

If I changed 'aysnc' to 'false' then ajax call will succeed.

In addition, click events that do not fall on a new page will fail. Only events that click on a new page are canceled.

I do not want the call to be synchronous.

Any ideas what could be the problem? How can I guarantee that the asynchronous call will be completed before the click event moves to a new page?

Answer 1

Since this is asynchronous, the code will be completed before logging occurs. What you want to do is pass the callback to an asynchronous call. This will retain the properties of async, but still let you go. Something like that:

  logClickEvent: function(clickCode, callback) { $.ajax({ 'type': 'POST', 'url': this.endpoint, 'async': true, 'cache': false, 'global': false, 'data': { 'clickCode':clickCode }, 'error': function(xhr,status,err){ alert("DEBUG: status"+status+" \nError:"+err); }, 'success': function(data){ if(data.status!=200){ alert("Error occured!"); } else { callback(); } } }); } $(document).ready(function() { $(".myClickEvent[clickName]").click(function(e) { e.preventDefault(); // This will prevent the link from actually leaving right away var clickCode = $(this).attr("clickName"); var href = $(this).attr('href'); myClickLogger.logClickEvent(clickCode, function(href){ if (href) window.location = href; }); }); }); 

You will probably want to change the callback for any links that do not leave the page when it is not necessary.

Answer 2

Using Firebug to track requests? If so, this is not entirely correct. If you use Fiddler to validate requests, you can see that they are successful. Canceled status basically means “browser canceled pending response”, which you still don't like.

Answer 3

I fixed the use of CORS headers on the AJAX endpoint server.

See also: http://blogs.mulesoft.org/cross-domain-rest-calls-using-cors/
Also: http://www.biodalliance.org/cors.html