Prompting user to save when they leave a page

Question

I need to prompt a user to save their work when they leave a page. I've tried onbeforeunload but I need to show a styled prompt not the usual dialog box. Facebook has managed to achieve this (if you have a Facebook account, edit your profile info and go to another page without saving and you get a styled prompt). I've also tried jquery unload but there doesn't seem to be a way to stop the unload event from propagating.

Answer 1

Take a closer look at what Facebook is doing: you get a prompt if you click a link on the page, but nothing when entering a new URL in the address bar, clicking a bookmark, or navigating Back in your browser's history.

If that works for you, it's easy enough to do: simply add a click event handler to every link on the page, and trigger your stylized confirmation from it. Since these handlers will get called prior to the start of any navigation events triggered from within the page itself, you can pretty much do whatever you want in the handler - save data, cancel the event entirely, record the intended destination and postpone it 'till after they confirm...

However, if you do need or want to respond to navigation events triggered externally, you'll have to use onbeforeunload. And yes, the dialog is crappy, and you can't cancel the event - that's the price we pay for all the scandalous idiots abusing such features back in the '90s. Sorry...

Answer 2

The selected answer is good but I still had to dig around for the details. If you want to use the onbeforeunload event, here's some sample code:

<script>
window.onbeforeunload= function() { return "Custom message here"; };
</script>

Answer 3

to improve on the answers of the others here I developed a great little script.

    $('.measurement_value').change(function() {
        $(window).bind('beforeunload', function(){
            return 'You have unsaved changes, are you sure you want to leave?';
        });

        $('#MeasurementAdminEditForm').submit(function(){
            $(window).unbind('beforeunload');
        });
        $('#CancelButton').click(function(){
            $(window).unbind('beforeunload');
        });
    });

On each of my form elements I give a class of 'measurement_value' and then only load the beforeunload if one of those elements change. Furthermore I unload the beforeunload on submit of my form and on the click of the cancel button.

hope this helps someone else.