Question

I have an onbeforeunload event :

$().ready(function() { 
  window.onbeforeunload=function() { return "haha" };
});

And my links are like this (ajax web site) :

<a href="#pageX" /> 

But the onbeforeunload is never called. What can i do ?

Thanks

Answer 1

I’m guessing since you’re trying to bind to the onbeforeunload and return a string, that you’re looking to provide the user with an “Are you sure you want to leave this page” dialog on an AJAX site.

In which case you probably need to go about this a little differently by binding a click handler onto the links. So you can prevent the hash change until the confirmation is made.

Something like:

$('a[href^="#"]').live('click',function(e){
    if( //should we be confirming first? ) {
        //put your confirmation code here either using default JS windows or your own CSS/jQueryUI dialog boxes
        // this code should either cache the url of the link that was clicked and manually update the location with it when the user confirms the dialog box (if you're using JQUI windows) or simply use JS confirmation boxes and based on the response, all you need to do is return; and the link click will handle normally
        e.preventDefault(); //prevent the link from changing the hash tag just yet
        e.stopImmediatePropagation(); //prevent any parent elements from firing any events for this click
    }
} );