Comments on: Prototype Script onbeforeunload when leaving a page

By: Alastair Brunton

Alastair Brunton — Wed, 24 Nov 2010 10:26:47 +0000

I have also done a version of this for jquery. It is available in this gist – https://gist.github.com/713450

By: Jonathan

Jonathan — Fri, 14 Mar 2008 03:52:58 +0000

Thanks! The event observer was the answer I was searching for.

By: Anthony

Anthony — Tue, 05 Feb 2008 11:43:39 +0000

Nice peace of code, really usefull and easy to integrate!

By: Web Design Glasgow

Web Design Glasgow — Wed, 23 Jan 2008 12:32:16 +0000

Alistair, thanks for posting your solution – I’ve been struggling getting it to work!

By: Charles Alderman

Charles Alderman — Thu, 10 Jan 2008 15:47:56 +0000

Well, I have figured something out. I can make it work on Safari, but I'm not using Prototype's Event observe method. Here's three different tries:




  this.currentFormState = $('myform').serialize(false);

  // .. do stuff

  // This Works on IE and FF, but not Safari

  Event.observe(window, 'beforeunload', function (e) {
      var warning = 'The form has changed.  Your changes will '
                    + 'be lost if you press OK.';                      
      var newContents = $('myform').serialize(false);
      
      if ( newContents != this.currentFormState ) {
        e.returnValue = warning;
        Event.stop(e);
      }
    }.bindAsEventListener(this)
  );


  // This doesn't work at all
 
  Event.observe(window, 'beforeunload', function () {
      var warning = 'The form has changed.  Your changes will '
                    + 'be lost if you press OK.';                      
      var newContents = $('myform').serialize(false);
      
      if ( newContents != this.currentFormState ) {
        return warning;
      }       
    }.bind(this)
  );


  // This works on IE, FF, and Safari, but it doesn't use 
  // Prototype's Event observe method

  window.onbeforeunload = function () {
    var warning = 'The form has changed.  Your changes will '
                  + 'be lost if you press OK.';  
    var newContents = $('myform').serialize(false);
    if ( newContents != this.currentFormState ) {    
      return warning;
    }
  }.bind(this);

By: pyrat

pyrat — Tue, 08 Jan 2008 16:58:21 +0000

Yes this is right. It doesnt work on safari. If you can find a modification of this solution that works on safari I would be very grateful!

Cheers,
Alastair

By: Charles Alderman

Charles Alderman — Tue, 08 Jan 2008 16:53:06 +0000

Very good tip. I like this solution—it’s quick and easy.

This works well for me on IE7 and FF2, but it doesn’t seem to work on Safari 2.0.4. (Haven’t installed beta 3 yet). I get no nag message box when refreshing/exiting the page, as Safari seems to skip the beforeunload event. I’m still investigating the problem…

Thanks