How to show a notification to user when user moves to another page without saving data

Question

I have a asp.net page for data entry, I want to show a notification message to user when user moves out from the page without doing the Save process. How I can achieve this functionality in client side?

Edit :

I don't want to show the message when user just open the data entry page and left, if user something added or edited the data any of the field then only needs to show the message.

Appreciate your help.

I don't know the language but wouldn't this be similar to '(if page.Lostfocus) display MessageBox. Again obviously this isn't an answer, but might help you think of a way to do it! :D — jbutler483, Aug 26 '14 at 14:17
possible duplicate of [How to show the "Are you sure you want to navigate away from this page?" when changes committed?](http://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when-ch) — mason, Aug 26 '14 at 14:27

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

There is an OnUnload event that gets called automatically when a user is leaving a page.

See here: Page unload event in asp.net

Something along the lines of

protected override void OnUnload(EventArgs e)
{
    base.OnUnload(e);
    if(!userSaved) { //e.g. user has not saved
        //display error
    }
}

edited May 23 '17 at 12:03

Community

1
1

answered Aug 26 '14 at 14:18

Corey Thompson

398
6
18

This will not work if the user clicks on a different link or closes the browser – Tallmaris Aug 26 '14 at 14:22

score 0 · Answer 2 · answered Aug 26 '14 at 14:25

0

For a client-side solution, you can use document.onbeforeunload, documented here: https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload

And another page has an example code:

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  (e || window.event).returnValue = confirmationMessage;     //Gecko + IE
  return confirmationMessage;                                //Webkit, Safari, Chrome etc.
});

Of course, you may want to track if there are real changes before alerting the user.

answered Aug 26 '14 at 14:25

Tallmaris

7,605
3
28
58

I don't want to show the message when user just open the data entry and left, if user something added or edited the data any of the field then only needs to show the message. – Able Alias Aug 26 '14 at 14:27
Add a global variable in your code somewhere like `var hasChanges = false` and set it to true when the user makes any change, then checkit in the above function and don't return anything if it's still false... This SO answer (http://stackoverflow.com/a/4047879/319633) has a perfect example – Tallmaris Aug 26 '14 at 14:28

score 0 · Answer 3 · edited May 23 '17 at 10:33

Alternatively to my other answer, you can use JavaScript to call an event:

<body onbeforeunload="ConfirmClose()" onunload="HandleOnClose()">

<script>
var myclose = false;

function ConfirmClose()
{
    if (event.clientY < 0)
    {
        event.returnValue = 'You have closed the browser. Do you want to logout from your application?';
        setTimeout('myclose=false',10);
        myclose=true;
    }
}

function HandleOnClose()
{
    if (myclose==true) 
    {
        //the url of your logout page which invalidate session on logout 
        location.replace('/contextpath/j_spring_security_logout') ;
    }   
}
</script>

Courtesy of how to detect the Page Close Event with ASP.NET -> might want to give it a read, as it has other suggestions/tips and tricks.

How to show a notification to user when user moves to another page without saving data

3 Answers3