jquery ajax post canceled
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.
Admin
Updated on July 12, 2022Comments
-
Admin almost 2 years
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?