Preventing users from accidentally navigating away from unsaved pages

Question

I got the snippet below from this SO post, and it works when a user tries to reload the page or close the browser etc. but if the user clicks on a link then it lets them naivagate away, and then incorrectly starts displaying the message on the wrong page. I am using pjax for the links.

   $(document).ready(function () {
       $('textarea').change(function () {
          window.onbeforeunload = function () { return "Your changes to the survey have not been saved?" };
      });
    });

Answer 1

You should use onbeforeunload like this, inconditionally:

<script type="text/javascript">
saved=true; // initially, it is saved (no action has been done)

window.onbeforeunload = confirmExit;
function confirmExit() {
    if (!saved) {
        return "You did not save, do you want to do it now?";
    }
}
</script>

It is not safe to handle this event only when another event is fired. The onchange event of your textarea here probably don't fire before you click on a link so the window won't handle the onbeforeunload at all. The link will work as expected: you will get redirected.

To deal with the saved flag, you could listen to what happens in your textarea, for example, when the user is actually typing something:

$('textarea').keyup(function(){
    saved=false;
});

Then, if you save the data in ajax, the save button could set it back to true:

$('#btnSave').click(function(){
    // ajax save
    saved=true;
});

Otherwise, it will load the next page with the saved flag on.

Answer 2

what about something like the following? Listening on all <a> links and then, depending on whether the variable needToSave is set to true, showing the message or letting it go.

var needToSave = false; // Set this to true on some change
// listen on all <a ...> clicks
$(document).click("a", function(event){        
    if (needToSave == true) {
        alert("You need to save first");
        event.preventDefault();
        return;
    }
});

UPDATE (as per Roasted's suggestion) this should trigger the unload event every time the link is clicked and perform your existing logic:

// listen on all <a ...> clicks
$(document).click("a", function(event){        
   $(window).trigger("unload");
});

jsFiddle here - http://jsfiddle.net/k2fYM/