CODEWITHSUNDEEP
javascriptjqueryajaxpost
hsemu
hsemu

Reputation: 61

jquery ajax post canceled

I want to track the mouse click events on a set of UI components on a set of pages. To do this, I am using the following jquery/ajax call(trimmed out u):

1.Ajax call which will add the click logging.

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 the ajax logger(the clickCode is an identifier for which button/image was clicked):

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

The above ajax call(1.) is "canceled" by browser whenever the button click being tracked takes to a new page.

If I change 'aysnc' to 'false', then the ajax call succeeds.

Also, click events which do not take to a new page succeed. Only the click events taking to new page are being canceled.

I do not want to make the call synchronous.

Any ideas, what could be the issue? How can I guarantee that the asynchronous call before is finished when the click event takes to a new page?

Upvotes: 6

Views: 16492

Answers (3)

alanjds
alanjds

Reputation: 4130

I fixed using CORS headers on the AJAX called endpoint server.

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

Upvotes: 0

Ilia G
Ilia G

Reputation: 10211

Are you using Firebug to track requests? If so, that is not entirely correct. If you use Fiddler to examine requests, you can see they are successful. Cancelled status mostly means "browser cancelled waiting for response", which you don't really care about anyway.

Upvotes: 0

Dan Crews
Dan Crews

Reputation: 3597

Because it's async, the code will complete before the logging ever happens. What you'll want to do is pass a callback into the async call. This will preserve the async properties, but still allow you to leave. Something like this:

  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'll probably want to modify the callback for any links that aren't leaving the page, when it's not necessary.

Upvotes: 3

Related Questions