This is my very simple code snippet:

$(window).unload(function() {
        $.ajax({
            url: 'stats_pages.php?last_id='+$("#last_id").val(),
        });
});

Simple enough. The AJAX call gets called perfectly in Firefox, but fails in Chrome. I've tried other variations, which sort of work:

window.onbeforeunload = function(){
        $.ajax({
            url: 'stats_pages.php?last_id='+$("#last_id").val(),
        });
        return false;
}

This works in Chrome, but it alerts "false" with the usual "Are you sure you want to leave this page?" message, which is not what I want obviously. Without the return false;, it doesn't fire the AJAX call.

Ideally I like the first solution the best, but does anybody know what's going on?

This is my very simple code snippet:

$(window).unload(function() {
        $.ajax({
            url: 'stats_pages.php?last_id='+$("#last_id").val(),
        });
});

Simple enough. The AJAX call gets called perfectly in Firefox, but fails in Chrome. I've tried other variations, which sort of work:

window.onbeforeunload = function(){
        $.ajax({
            url: 'stats_pages.php?last_id='+$("#last_id").val(),
        });
        return false;
}

This works in Chrome, but it alerts "false" with the usual "Are you sure you want to leave this page?" message, which is not what I want obviously. Without the return false;, it doesn't fire the AJAX call.

Ideally I like the first solution the best, but does anybody know what's going on?

• javascript
• jquery
• ajax
• onbeforeunload

• Instead of writing return false what happens if you write alert('something')? I wonder it just to test is it a problem about asynchronism or not(It will give you a chance to delay it)? – kamaci Commented Nov 30, 2011 at 18:38

3 Answers 3

Set ASYNC : false in your ajax call

$(window).unload(function() {
        $.ajax({
            url: 'stats_pages.php?last_id='+$("#last_id").val(),
            async : false,
        });
});

As of today, this will still fail with newer versions of Chrome. The problem is with the unload event and Chrome. It seems to have been a problem since Chrome 14. You can read more about the issue from a jQuery bug ticket: http://bugs.jquery./ticket/10509.

There is also a fix for Chrome listed on that link above:

window.onbeforeunload = function() { 
  $.ajax({
       url: 'stats_pages.php?last_id='+$("#last_id").val(),
       async : false,
  });
}

Neither of the solutions above were acceptable to me. The first because async AJAX calls can cause the client to behave badly if the server is slow, and the second because we already use the onbeforeunload event to generate an "Are you sure?" message for users leaving a page where they have made changes. I experimented with setTimeout and jQuery's delay(), but I came to the conclusion that as soon as the thread goes into sleep mode, Chrome kills the thread, and apparently the AJAX call needs a little bit of time to formulate the request for it to be successful. So eventually I was able to resolve this problem with a very low-tech loop which never put the thread into a sleep state, and kept the thread running for another 50 milliseconds.

var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > 50) {
        return;
    }
}

With this change, the AJAX call now fires correctly in Chrome with no noticable lag on the client side.