14

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.

DOK
  • 32,337
  • 7
  • 60
  • 92
Akeem
  • 7,897
  • 5
  • 32
  • 41
  • Going to check what stack overflow uses. They are able to sense when someone is leaving, even if they are going somewhere other than another stack overflow page. Therefore, they must be doing it client-side. – Zack Marrapese Apr 19 '09 at 20:13
  • 1
    StackOverflow uses a regular window.onbeforeunload it seems. – markus Apr 19 '09 at 20:19
  • Have you tried showing a special div on the "onbeforeunload" event? That may work. – BYK Apr 20 '09 at 09:38

3 Answers3

26

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...

Shog9
  • 156,901
  • 35
  • 231
  • 235
  • If that's not enough you can add a window.onbeforeunload for other purposes to keep users from losing their data in case of the other events Shog9 mentioned. – markus Apr 19 '09 at 20:21
  • +1 for belt-and-braces with links and onbeforeunload. Although, be sparing with this and only use it where there is a real danger of important data loss. Personally I find SO's onbeforeunload a bit irritating! – bobince Apr 19 '09 at 20:43
  • 3
    I would use event delegation instead of registering event handlers on EVERY SINGLE link... – James Apr 19 '09 at 23:00
  • @JimmyP: good suggestion - not only would that be easier/faster, it'd allow for per-link event handlers to easily avoid the confirmation by simply eating the event themselves. – Shog9 Apr 19 '09 at 23:20
5

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>
Frank Schwieterman
  • 24,142
  • 15
  • 92
  • 130
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.

Chris Pierce
  • 706
  • 5
  • 9