jQuery UI Dialog OnBeforeUnload

Question

I have a small problem. I'm attempting to catch the OnUnLoad Event of the Window and ask a confirmation question and if the user decides they want to stay then fine, and if they want to leave the page then they'll lose all unsaved data. Here's the issues...

I'm using a jQuery UI Dialog and when I put the following code on my page, I have the Dialog open, and when I click the back button on the browser, it never pops up the msgbox. It just refreshes the page:

<script type="text/javascript"> 
    $(window).bind('beforeunload', function() { 
            alert('you are an idiot!'); 
        } 
    );
</script>

And the solution that I'm using was a post here. Again, the msgbox will display fine if I do not have the jQuery UI Dialog open. If I do, then it doesn't display the msgbox and just refreshes the page.

Any ideas?

Answer 1

The correct way to display the alert is to simply return a string. Don't call the alert() method yourself.

<script type="text/javascript">
    $(window).on('beforeunload', function() {
        if (iWantTo) {
            return 'you are an idiot!';
        }
    }); 
</script>

See also: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload