CODEWITHSUNDEEP
javascriptjqueryonbeforeunload
user198989
user198989

Reputation: 4665

Using onbeforeunload without dialog?

I'm trying to post data when a user leaves my page. I have finally managed to find a working solution, however, it shows a confirmation dialog when the user leaves. I have tried return null; but it didn't work. Is it possible to disable the dialog?

window.onbeforeunload = function() {
    $.post("track.php", {
        async: false,
        refid: refid,
        country: country, 
        type: type,
    });

    return '';
}

Upvotes: 31

Views: 40788

Answers (6)

Sandip Subedi
Sandip Subedi

Reputation: 1077

This is with react and typescript:

  useEffect(() => {
    window.onbeforeunload = (ev: any) => {
      ev.preventDefault()
      anotherMethod()
    }
  }, [])

Upvotes: 1

menepet
menepet

Reputation: 882

Removing return statement worked for me also.

Upvotes: 4

Hay Thi
Hay Thi

Reputation: 165

If you want to disable the dialog, please only write

window.onbeforeunload = function() { ... return; }

instead of

window.onbeforeunload = function() { ... return ''; }.

I hope it will help you.

Upvotes: 13

meesern
meesern

Reputation: 2656

From the Mozilla Developer Network page:

When this event returns a non-void value, the user is prompted to confirm the page unload.

This means the return value of the handler must be undefined (not '', false, or null) in order to avoid triggering the confirmation prompt.

window.onbeforeunload = function() {

  $.post("track.php", {
  ...
  });

  return undefined;
}

In javascript you can skip the return value altogether to get the same result.

In coffeescript with jquery it's something like

$(document).ready ->
  $(window).bind('beforeunload', ->
    #put your cleanup code here
    undefined
  )

Upvotes: 50

A. Wolff
A. Wolff

Reputation: 74420

Could you test this:

$(window).on('beforeunload', function (e) {
    if (e.originalEvent) $.post("track.php", {
        async: false,
        refid: refid,
        country: country,
        type: type,
    });
    else $.get("", {
        async: false
    });
    $(this).trigger('beforeunload');
}

This will create many useless requests but should let your first request enough time to reach server.

Upvotes: 2

user198989
user198989

Reputation: 4665

I have found a really simple trick to get this working with using

$(window).bind('onbeforeunload', function () {

$.post("track.php", {
async: false,
refid: refid,
country: country, 
type: type,
});

});

Upvotes: 1

Related Questions