Question

I would like the browser to keep the page open until the ajax requests are sent. This is what I imagine it would look like

var requestsPending = 0;

window.onbeforeunload = function() {
    showPleaseWaitMessage();
    while(requestsPending > 0);
}

// called before making ajax request, atomic somehow
function ajaxStarted() {
    requestsPending++;
}
// called when ajax finishes, also atomic
function ajaxFinished() {
    requestsPending--;
}

Unfortunately, JS doesn’t do multi-threading. To my understanding, the callback (ajaxFinished) would never be executed because the browser would try to wait until the while loop finishes to execute it, and so the it would loop forever.

What’s the right way to do this? Is there maybe a way to force JS to evaluate the next thing in its to-do list and then come back to the while loop? Or some syntax to “join” with an ajax call? I’m using DWR for my ajax.

Thanks,
-Max

Answer 1

Edit Based on your comment below, a revised answer:

If you want to block until a previously-initiated request completes, you can do it like this:

window.onbeforeunload = function(event) {
    var s;
    event = event || window.event;
    if (requestsPending > 0) {
        s = "Your most recent changes are still being saved. " +
            "If you close the window now, they may not be saved.";
        event.returnValue = s;
        return s;
    }
}

The browser will then prompt the user to ask whether they want to leave the page or stay on it, putting them in control. If they stay on the page and the request has completed while the prompt was up, the next time they go to close the page, it’ll let them close it without asking.

Note that on modern browsers, your message will not be shown; instead, the browser will use a generic message. So on modern browsers, returning any non-blank string is sufficient. Still, you may want to return a useful string (such as the above) in case your user is using an obsolete browser that will still show it.

More on asking the user whether to cancel close events here and here.

---

Old answer :

Ideally, if possible, you want to avoid doing this. 🙂

If you can’t avoid it, it’s possible to make an Ajax request synchronous, so that it blocks the onbeforeunload process until it completes. I don’t know DWR, but I expect it has a flag to control whether the request is synchronous or not. In the raw XmlHTTPRequest API, this is the third parameter to open:

req.open('GET', 'http://www.mozilla.org/', false);
                                            ^ false = synchronous

Most libraries will have an equivalent. For instance, in Prototype, it’s the asynchronous: false flag in the options.

But again, if you can possibly avoid firing off Ajax requests as part of the page unload, I would. There will be a noticeable delay while the request is set up, transmitted, and completed. Much better to have the server use a timeout to close down whatever it is that you’re trying to close down with this. (It can be a fairly short timeout; you can keep the session alive by using asynchronous Ajax requests periodically in the page while it’s open — say, one a minute, and time out after two minutes.)