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.