$(window).unload not working as expected

Question

I'm making a small chat application with PHP + MySQL + JavaScript, I've written a function disonnectUser(), which is called when the user press the disconnect button. Here it is:

function disconnectUser(){
            $.post('web/WEB-INF/classes/handleChatUser.php',{ action: 'disconnect',nick: localNickname});           
            $('#chat').stop(true,true).fadeOut(2000,function(){
                nicknameDialog();
            });

            $('#messageInput').val(null);
            $('#clientList').html(null);
            $('#chatScreen').html(null);
            clearInterval(refreshIntervalId);
            clearInterval(refreshIntervalId2);
            connected = false;
        }

And it works like a charm, but when I call this very function in another context, when the user instead of pressing disconnect just exit the page, in this function

$(window).unload(function() {
                if(connected){
                disconnectUser();
                connected = false;
                }
            });

it doesn't work. And I'm sure it's being called, because if I put an alert it's called normally before closing the page. I think the page is closing before the code runs completely, so I think if I put some block there until the code finish running it would work?

score 6 · Answer 1 · edited May 23 '17 at 12:06

6

The problem is that $(window).unload() doesn't waits any AJAX call before closing the window (what is right because AJAX is assync).

You need to force the AJAX to be sync, ie, wait the response. Inside your disconnectUser function:

$.ajax({
    type: 'POST',
    async: false, // This is the guy.
    url: '/blablabla'
});

You can read more about it here: $(window).unload wait for AJAX call to finish before leaving a webpage

edited May 23 '17 at 12:06

Community

1
1

answered May 03 '11 at 19:03

Erick Petrucelli

14,386
8
64
84

1

If I have fully answered your question, **please mark it as accepted**. If something still remains, let us know so we can complete the answers. – Erick Petrucelli May 04 '11 at 13:56

Eli · Accepted Answer · 2011-05-03T18:58:41.973

2

Instead of unload, how about beforeunload?

window.onbeforeunload = function() {
    if(connected){
        disconnectUser();
        connected = false;
    }
};

Also, your disconnectUser method already sets connected to false, no need to do it here also.

It also seems that jQuery doesn't really handle the beforeunload event, which is why you'll need to revert to native JS to handle this:

http://groups.google.com/group/jquery-en/browse_thread/thread/4e5b25fa1ff5e5ee?pli=1

edited May 03 '11 at 18:58

answered May 03 '11 at 18:52

Eli

17,397
4
36
49

You're right,i was setting the connected to false twice, thanks for this!! – Rodrigo Cavalcante May 03 '11 at 19:33

score 1 · Answer 3 · answered May 03 '11 at 19:03

Try using a synchronous request. Perhaps in combination with onbeforunload like the other poster suggested. If that doesn't work, I suppose you're out of luck. A request that is synchronous blocks the browser while it's happening, so you might want to use it only for the unload function, assuming the method even works.

function disconnectUser(){
            jQuery.ajax({
                url: 'web/WEB-INF/classes/handleChatUser.php',
                data: { action: 'disconnect',nick: localNickname},
                type: 'POST',
                async: false
            });

            $('#chat').stop(true,true).fadeOut(2000,function(){
                nicknameDialog();
            });

            $('#messageInput').val(null);
            $('#clientList').html(null);
            $('#chatScreen').html(null);
            clearInterval(refreshIntervalId);
            clearInterval(refreshIntervalId2);
            connected = false;
        }

$(window).unload not working as expected

3 Answers3