Trying to handle unload event

Question

I'm trying to make some actions when I close the browser or I go to some other page but nothing its done this is the script at the bottom there are the rwho ways I tried. I tried using jquery what I realize that unload function is deprecated

if(game_id){
    get_players();
    get_users();
}

function get_players(){
    socket.emit('on_lobby', {
        game_id:game_id,
    });
    socket.on('lobby_connected',function(){
        $.ajax({
            url:'/getPlayers',
            method:'GET',
            data:{
                game_id: game_id
            }
        }).done(function(response){
            if(response.status === 'ok'){
                $('#connected_players').empty();
                $('#connected_players').append(response.html);
                
            }else{
                Swal.fire({
                    icon: 'error',
                    text: response.message,
                })
            }
        });
    });
}

function get_users(searched){
    $.ajax({
        url:'/getConnectedUsers',
        method:'GET',
        data:{
            searched:searched
        }
    }).done(function(response){
        if(response.status === 'ok'){
            $('#connected_users').empty();
            $('#connected_users').append(response.html);
            
        }else{
            Swal.fire({
                icon: 'error',
                text: response.message,
            })
        }
    });
}

function search_users(){
    var searched = $('#search-user-input').val();
    get_users(searched);
}

function send_invitation(receiver){
    socket.emit('private',{
        type:'invitation',
        receiver: receiver,
        sender: username,
        text:'/game/' + game_id
    });
}
socket.on('user_loged', function(){
    get_users();
})
socket.on('user_loged_out', function(msg){
    if($('#player-item-'+ msg.username ) !== undefined){
        $('#player-item-'+ msg.username).remove();
    }
    get_users();
})

//not work
window.onunload = unloadPage;

function unloadPage()
{
 alert("unload event detected!");
}
//doesn't works too
window.addEventListener('unload', function(event) {
    alert('I am the 3rd one.');
});

Consider the beforeunload event – Patrick Nov 15 '20 at 18:18 — Patrick, Nov 15 '20 at 18:18

HoldOffHunger · Accepted Answer · 2020-11-15T18:29:19.543

1

Use the beforeunload event handler. To cite MDN Web Docs...

The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.

You are right, unload() in jQuery is deprecated! They don't quite say it, but they do list beforeunload as a possible alternative on the unload() docs page...

In practical usage, [unload()] behavior should be tested on all supported browsers and contrasted with the similar beforeunload event.

In a simple example below, a handler checks if the user is okay with redirecting or refreshing, and if so, allows the event to handle normally (close the window), otherwise, we cancel the event (either returning false or cancelling default should be sufficient, but I like doing both).

In pure JavaScript...

window.onbeforeunload = function (e) {
    if(confirm()) {
        return true;
    }
    e.preventDefault();
    return false;
};

edited Nov 15 '20 at 18:29

answered Nov 15 '20 at 18:18

HoldOffHunger

18,769
10
104
133

using `beforeunload` I get an alert but not with the text setted on `confirm`, the browser show his own text – af_159623 Nov 15 '20 at 18:23
@af_159623: Ah, interesting! I'll update my answer. It doesn't seem like you can set it anymore: [Is it possible to display a custom message in the beforeunload popup?](https://stackoverflow.com/a/38880926/2430549) Top answer: *"tl;dr - You can't set custom message anymore in most modern browsers". – HoldOffHunger Nov 15 '20 at 18:28
@af_159623: Oops, I forgot you asked for the answer in JavaScript, and I gave jQuery. I have updated my answer! – HoldOffHunger Nov 15 '20 at 18:31

Trying to handle unload event

1 Answers1