Preventing users from accidentally navigating away from unsaved pages
html, javascript, jquery, pjax
Solution
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.
Problem
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?" }; }); }); ```