Web Hosting Talk : Web Hosting Main Forums : Programming Discussion : window.onbeforeunload cross-browser functionality (jQuery)

[mattle]

Hi all,

So, I'm trying to negotiate overriding a window.onbeforeunload event.

I've got a header page that includes some basic JS for the whole site, including this bit:

$(document).ready(function ()
{
  $("#loading").hide("fast");
  $(window).bind('beforeunload', function () { $("#loading").show("fast"); });

  if (typeof pagestart == 'function') pagestart();
});

So, basically, <div id="loading"/> is a div that's also included in the header that has a nice little spinning graphic, and is z-indexed to make all other page elements unclickable before the page finishes loading. When you first click away from a page, I pop it up and once your destination finishes loading, it goes away. That part works great.

pagestart() is just a method that I use on individual pages to initialize any handlers, etc. that are page-specific.

So, now I've got a page that checks for changes in a form and needs to pop up a confirmation dialog if the user attempts to navigate away with unsaved changes. This means that the loading div will pop up, but if they click "Cancel," obviously, we need it to go away again. Alternatively, if we just overwrite the onbeforeunload event so that the loading div does not appear until the next page starts rendering, that would be fine as well.

This does not work at all:

function pagestart()
{
  $(window).unbind('beforeunload');
  $(window).bind('beforeunload', function ()
  {
    if (changed)
    {
      return "You have unsaved changes on this page.  Leaving the page\n" +
             "will result in the loss of these changes.";
    }
  });
}

The onBeforeUnload event doesn't fire at all, for some reason. If I set it explicitly:

window.onbeforeunload = function ()
{
  if (changed)
  {
    $("#loading").hide("fast");
    return "You have unsaved changes on this page.  Leaving the page\n" +
           "will result in the loss of these changes.";
  }
}

This works exactly as I'd expect in Firefox, however, in IE (7), the confirmation dialog is displayed and behaves as expected, but the "loading" div never goes away.

[mattle]

Fix was:

$(window).unload(function() 
{
  //...
});

jQuery seems to actually bind that to beforeunload...

[Nigel1111]

Originally Posted by mattle

Fix was:

$(window).unload(function() 
{
  //...
});

jQuery seems to actually bind that to beforeunload...

How is that cross browser? Chrome doesn't seem to give a fig about it.