CODEWITHSUNDEEP
javascriptjqueryajax
UXerUIer
UXerUIer

Reputation: 2338

AJAX and user leaving a page

I'm working on a chat and I'm trying to figure out how I can detect that the user has left the page or not. Almost everything is being handled by the database to avoid the front end from messing up.

So what I'm trying to do is once the page is left for any reason (window closed, going to another page, clicking a link, etc.) an ajax call will be fired before a person leaves so I can update the database.

This is what I've tried:

$(window).unload(function(){
      $.post("script.php",{key_leave:"289583002"});
});

For some odd reason, it wouldn't work, and I've checked the php code, and it works fine. Any suggestions?

Upvotes: 16

Views: 19963

Answers (5)

Richard Ye
Richard Ye

Reputation: 695

The unload event is not recommended to detect users leaving the page. From MDN:

Developers should avoid using the unload event ... Especially on mobile, the unload event is not reliably fired.

Instead, use the visibilitychange event on document and/or the pagehide event on window (see links for details). For example:

document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
        $.ajax({
            type: 'POST',
            url: 'script.php',
            async:false,
            data: {key_leave: "289583002"}
        });
    }
});

Better yet, use Navigator.sendBeacon, which is specifically designed for the purpose of sending a small amount of analytics data to a server:

document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
         navigator.sendBeacon('script.php', {key_leave: "289583002"});
    }
});

Upvotes: 0

Edesa
Edesa

Reputation: 591

This is related to the answer above. https://stackoverflow.com/a/10272651/1306144

This will execute the ajax call every 1 sec. (1000)

function callEveryOneSec() {
    $jx.ajax({}); // your ajax call
}

setInterval(callEveryOneSec, 1000);

Upvotes: 0

Parv Sharma
Parv Sharma

Reputation: 12705

This isn't the correct way of doing this... Suppose the OS just hangs or something happens in the browsers process then this event wont be fired. And you will never ever know when the user has left, showing him/her online ever after he/she has disconnected. Instead of this, what you can do is.

  1. Try connecting a socket so that you can know the user is disconnected when the socket is disconnected
  2. You can send a request to the server (say after every 1 sec) so that you can know that the user is still connected. If you didn't receive the request - even after 2 secconds - disconnect the user.

Upvotes: 4

stewe
stewe

Reputation: 42642

Try this:

$(window).unload(function(){
    $.ajax({
        type: 'POST',
        url: 'script.php',
        async:false,
        data: {key_leave:"289583002"}
    });
});

Note the async:false, that way the browser waits for the request to finish.

Using $.post is asynchronous, so the request may not be quick enough before the browser stops executing the script.

Upvotes: 38

Milan Jaric
Milan Jaric

Reputation: 5646

Try to add popup (prompt("leaving so early?")) after $.post. It may work. Tho it may be bad user experience. :)

Upvotes: 1

Related Questions