jquery.ajax set with async=true to send data back to server not working if page redirects/reloads.

Question

I'm trying to save some content whenever a button/hyperlink is clicked using jquery.ajax (Using Asp.net 3.5). The logic is as follows:

• Through .bind in jquery I bind my own method(MakeLog) to a button click or hyperlink click. The click events of button/hyperlink contain nothing, I need to use .bind for selective controls.
• Now we have a button whose click event will fire a method, say MakeLog.
• Code snippet for MakeLog is as follows:

.

var xhr = jQuery.ajax({  
    url: "/Logger.aspx",  
    data: { content: logContent },  
    error: function(XmlHttpRequest, textStatus, errorThrown) {
        alert ("XmlHttpRequest: " +   XmlHttpRequest + 
               " textStatus: " + textStatus + "errorThrown: " + 
               errorThrown);
    },
    contentType: "Content-Type: text/html; charset=utf-8",  
    success: function (xml, txtStatus, XmlHttpRequest) {  
       //alert("xml" + XmlHttpRequest);  
    },  
    async: true  
});  

• This works fine in IE but in Firefox this is not sending the data back as expected.
• I tried to identify the issue and came across the following: http://stackoverflow.com/questions/3522944/jquery-ajax-calls-async-false-vs-async-true
• What I understand is that, whenver page is redirecting/reloading due to button click or hyperlink click the async call is not working properly.

Answer 1

This sounds like a similar issue I encountered with AJAX event logging. This can be solved by loading pixel images via JavaScript. The reason is that page loads interrupt XmlHttp requests (your AJAX calls). Loading images, however, will not be interrupted by page loads.

See the following question I posted previously for reference: http://stackoverflow.com/questions/3214023/ajax-get-race-condition