31

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 '';
}
4
  • 2
    Don't return anything? Commented Jun 19, 2013 at 9:52
  • You need to use return on window.onbeforeunload :( Commented Jun 19, 2013 at 9:58
  • Maybe there is a workaround, let me test it. I suppose your question is following this one: stackoverflow.com/questions/17169092/… correct? Commented Jun 19, 2013 at 10:03
  • This one works, but only issue is it pops a dialog, ok ? There are different questions. Commented Jun 19, 2013 at 10:06

6 Answers 6

50

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
  )
Sign up to request clarification or add additional context in comments.

1 Comment

For information, the "beforeunload" event is not reliable for data manipulation. The primary goal was just to display an alert message before leaving the web page: stackoverflow.com/questions/9943220/…
13

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.

Comments

4

Removing return statement worked for me also.

Comments

2

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.

3 Comments

Thanks, I finally found the solution, the bind beforeunload should be bind onbeforeunload.
you mean: $(window).bind('onbeforeunload',...) ??? Because using this shouldn't work at all. Anyway, if you got a correct workaround, please post it as answer.
It works. I have tried on firefox, chrome and explorer. All worked.
1

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,
});

});

2 Comments

Ok, maybe you are using older version of jquery because now: <<Note that there is no longer 'on' in the event being bound. Using the previous onbeforeunload in later versions of jQuery will result in nothing happening.>>
I'm using the same approach put the post code won't trigger without return
1

This is with react and typescript:

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.