Save Changes on Close of Browser or when exiting the page.

• Download SaveonClosePOC_enhancements.zip - 288.0 KB

Introduction

This article describes on how you can implement the functionality of saving changes on close of the browser or navigating away from the current web application. It also discusses on various ways that the user can exit the page how data be saved on those events.

Background

Many have been trying to implement the functionality of Saving the data on close of the browser. I was also one of you trying to find a way on how to implement the same. I had been to many forums and discussion boards, but couldn't find a way on how to implement this. I finally landed up at a particular piece of javascript code (attached below) to trap the close of IE window which actually helped me in completing this functionality.

Using the Code

Navigation in a site can happen in two ways. Following are the list of actions by which users can navigate.

• Navigating to pages using controls provided within the site.
• Navigating to pages using Browser Controls, shortcut keys or the right click options.

Following are the ways through which the user can navigate away from the page. All these are covered in this solution.

Navigation or postback using controls available in the application.

• Image Buttons
• Link Buttons
• Submit Buttons
• Server Controls with "Autopostback" option set to True

Navigation through user actions, browser buttons, shortcut keys, close of the browser. Following are a list of ways by which this is achieved.

• Back button on the Browser Toolbar
• Refresh button on the Browser Toolbar
• Close button on the Browser Toolbar
• Home button on the Browser Toolbar
• ALT + F4 to close the browser
• CTRL + F4 (for tabbed browsers)
• F5 or CTRL + R or Right click for refresh
• ALT + Home button (to navigate to client's Home page)
• Click backspace (alternative for Back button)
• Typing a URL and navigating to a different page
• Selecting a URL from the favorites button
• Right Click and select Refresh

Identifying the different actions and enabling save for each action is a tedious process. The save functionality can be implemented in a simpler way using the javascript event onbeforeunload.

Reason to use onbeforeunload:

The onbeforeunload event (which is called before unload event) is called when

• Navigating to another page (as mentioned above)
• Postback due to a control event
• Using controls on the Browser
• Closing the page.

Thus onbeforeunload is the appropriate event at which the save functionality can be implemented.

Implementation of the Save Functionality:

To differentiate between a user initiated event and a control initiated event an attribute is being added named tag with a value "DonotCallSaveonLoad" to all the known controls in the application using which the save method should be called without prompting the user to save the page.

The event.srcElement will set the object of the control to the variable currentElement which initiated the postback. This will be set on the onClick event of the control.

Note: onClick event is the only point where the Control object can be retrieved because the object of the control is destroyed when the process reaches the onbeforeUnload event.

The onbeforeUnload event calls the HandleOnClose function which checks if the variable currentElement has a value or not.

The javascript function HandleOnClose checks for this attribute tag of the currentElement object. If the currentElement is null or the value of the attribute tag of the currentElement is not DonotCallSaveonLoad, then it calls the function FunctiontoCallSaveData, otherwise the save functionality on the code behind is called.

The implementation of the function FunctiontoCallSaveData is the same as previously sent which is as follows.

The form.submit will in turn call Page_Load in which the Save functionality can be called. Error Handling can also be performed for this functionality. The same is shown in the code snippet below.

Points to Note

This functionality cannot be debugged using Breakpoints. This functionality can be verified by the checking if the data has been updated in the datasource. In the attached demo, there is a SQL script which creates a temporary table to which data is stored on close of the browser. Please make necessary changes to the function SaveDataonPage on the .vb file as per your convinience. Exception Handling is implemented using Enterprise Library 2.0. Customizations can be done to it Exception Handling also.

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 22 of 22 (Total in Forum: 22) (Refresh) FirstPrevNext

Thanks Falguni Barik 4:30 11 Sep '09   Dear Abishek, Its an excelent one.Its solve my problem easily. Thanks A lot. Great Job. Falguni Sign In·View Thread·PermaLink ASP.net masterpage naveenIIT 18:39 12 Jan '09   this doesn't work when we use asp master pages.give some help to resolve this issue. NAVEEN MADHAWA Sign In·View Thread·PermaLink Re: ASP.net masterpage fuzzballb 1:24 30 Oct '09   I am using a asp.net master page as wel, and is sometimes works. The main problem seems to be that there seems limited time for the submit in the onbeforeunload function. In my case i am trying to submit a custom unlock page in my document onbeforeunload. When i need to save a lot of data in the page that should fire the onbeforeunload it works fine, but if i save less data, there seems less time for the onbeforeunload event and the custom unlock page isn't submitted. Sign In·View Thread·PermaLink Server Postback Issue... Rohan Christian 13:08 2 Oct '07   I'm working on a Chat application where I need to Auto Logout users on the event of browser close... I have tried to use your script and logic from this article but I am not able to see the values getting updated in the database although I am able to see the event being triggered... Wanted to know if there was an issue with the server postback or not...? Could a pop-up blocker block an emulated postback from the Client...? Thanks... Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Server Postback Issue... Abishek R Srikaanth 22:31 3 Oct '07   Hi, Could you please check for the following in the code. 1) EnableViewState true for your page. 2) Save functionality is there in Page_Load 3) If Save Functionality in Page_Load, is it outside If Not Ispostback condition. If problem still persists, please reply me. Thanks and Regards Abishek.R.Srikaanth Sign In·View Thread·PermaLink Re: Server Postback Issue... Rohan Christian 9:45 4 Oct '07   Hi, Well, all these things are present in my aspx 2.0 code file... What happens is until I display an alert box after I submit the form on browser close it does try to postback but as soon as I click on the OK button of the alert box it terminates the posting back of the form and does not update the value in the database....And to my other surprise, if I just try to postback without displaying an alert box it does not postback at all... So as a workaround...what I did was I invoked a webservice on browser close and then alerted the user with a message which updated the logout timestamp value in my database before the browser closed or when it navigated to a different webpage Rohan Sign In·View Thread·PermaLink missed some events skullkiller 11:15 25 Sep '07   good article. you just missed some events: Alt + Left Arrow (Backward) and Alt + Right Arrow (Forward) Sign In·View Thread·PermaLink 2.00/5 (1 vote) Re: missed some events Abishek R Srikaanth 22:27 3 Oct '07   Hi, Can you please check for this event also. It works for this event also since ALT <- and Alt -> calls the onbeforeunload event which should call the rest of the functionality Regards Abishek Sign In·View Thread·PermaLink Incomplete (defective) code fwsouthern 0:10 13 Sep '07   The following comments are related to IE, not FireFox (don't use). Check your code again -- you accommodate the positive but not the negative: For example, your test for Alt-F4 -- surely you only want Alt-F4, not Ctrl-Alt-F4, Shift-Alt-F4 or Ctrl-Shift-Alt-F4, right? That's what you will get unless you correctly test for the negative of Ctrl & Shift: with (window.event) { if (altKey && !shiftKey && !ctrlKey && keyCode == 115) // do your Alt-F4 thing } The remainder of your event.onkeydown tests are similarly flawed. Your might also want to revisit your test for event.clientY < 0 -- some folks locate their secondary monitor(s) in negative space (to the "left" or "above" the primary monitor) which may result in an incorrect detection) -- for this to function correctly, you will have to bracket and test for a click the range of X & Y for the "close" button. Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Incomplete (defective) code Abishek R Srikaanth 21:18 24 Sep '07   Could you comment on the current Implementation too. Sign In·View Thread·PermaLink 2.00/5 (1 vote) Very helpful samerh 3:04 11 Sep '07   very nice article. I was wondering if there is a way to display the message only if changes are made to the textbox in the sample, because now it is displaying a message even if no changes are made. thanks Sign In·View Thread·PermaLink Re: Very helpful ricobano 6:10 23 Oct '07   The solution i have used before for this, is to run through all the input controls when the page loads and add the control and its initial value to an array. when onbeforeunload is called loop through the array and check the initial values against the current values. If they do not match then popup the confirm save message. Below is some code i threw together to get you started var arControls = new Array(), function getControls(){ for(i=0; i if((document.forms[0].elements[i].tagName.toLowerCase() == "input" || document.forms[0].elements[i].tagName.toLowerCase() == "textarea" || document.forms[0].elements[i].tagName.toLowerCase() == "select") && (document.forms[0].elements[i].type != "hidden" && document.forms[0].elements[i].type != "button" && document.forms[0].elements[i].type != "submit" && document.forms[0].elements[i].readOnly != true )) { arControls.push(new control(document.forms[0].elements[i],document.forms[0].elements[i].value)) } } } function control(Control, ControlValue){ this._Control = Control; this._ControlValue = ControlValue; this.getControl = function(){ return this._Control; }; this.getControlValue = function(){ return this._ControlValue; }; } window. önbeforeunload = \\function to check values have changed Sign In·View Thread·PermaLink 1.50/5 (2 votes) Nice Pooya Musavi 11:05 7 Sep '07   What about mouse?? Sign In·View Thread·PermaLink Re: Nice Rodrigo Rodriguez 5:48 12 Sep '07   Here is a draft of the clicking processing: You need to associate all onclick events of links on the page to a javascript function (onLinkClicked) that performs the checking if data has changed   (by calling markChanged whenever a change is made), the href attribute just contain '#'. Then, associate all A onclick events(associateEvents). After that you can show a message to the user allowing him to choose wheter to save data, in the leave event(onPageLeave), cancel the click or discard changes. After that processing, you either use a redirect on server to RedirectHidden to follow to the original link or just stay on the page by showing a success message. Note that a MsgBox with 3 button is avaiable only in VBScript and may be called by JScript to show the three button YesNoCancel message box.       function associateEvents()       {                 elements = mnuGrp.getElementsByTagName('A');                 for (cont = 0; cont < elements.length; cont++)                 {                      if (elements.item(cont).className.length != 0)                           continue;                      elements.item(cont).onclick = mouseClickItem;                   }       }      function markChanged()      {           document.all["DocumentStateHidden"].value = true;      }          function onLinkClicked(obj)      {           if (obj == null)                return false;           for(cont = 0; cont < obj.childNodes.length; cont++)           {                if (obj.childNodes.item(cont).nodeName != 'A')                     continue;                var URL = obj.childNodes.item(cont).href;                if (typeof(onPageLeave) != 'undefined')                {                     return onPageLeave(URL);                }                else                {                     window.location.assign(URL);                }                               }           return true;      }      function onPageLeave(URL)      {           window.event.returnValue = false;                     if (document.all["DocumentStateHidden"].value == "true")           {                switch(Messagebox("Save, Discard or Cancel message?"))                {                     case 1: // Save                          document.all["RedirectHidden"].value = URL;                          form.submit();                     break;                                                            case 2: // Discard                          window.navigate(URL);                     break;                                                             case 3: // Cancel.                            break;                }           }           else           {                window.navigate(URL);           }           return true;      }      </script>           <script type="text/vbscript"> function MessageBox(Text) Dim intSelection intSelection = MsgBox(Text, VbYesNoCancel, document.all.Item("msgConfirm").innerText) If intSelection = 6 Then    MessageBox = 1 ElseIf intSelection = 7 Then    MessageBox = 2 Else    MessageBox = 3 End If end function </script> http://www.rodrigorodriguez.com Sign In·View Thread·PermaLink doesn't work with FireFox barbod_blue 21:50 1 Sep '07   hi , i tested your code , that's so cool but it doesn't work with FireFox... how can i change it , that work with FF??? Sign In·View Thread·PermaLink 4.00/5 (1 vote) Re: doesn't work with FireFox Abishek R Srikaanth 21:51 3 Sep '07   Hi barbod_blue, Have updated the article Added the functionality for Firefox support. Thanks for Info Abishek.R.Srikaanth Sign In·View Thread·PermaLink 5.00/5 (1 vote) doesn't work with FireFox barbod_blue 21:49 1 Sep '07   hi , i test your code , that's so cool but it doesn't work with FireFox... how can i change it , that work with FF??? Sign In·View Thread·PermaLink 2.00/5 (2 votes) Good Article merlin981 5:53 29 Aug '07   Thanks for sharing this. While it doesn't cover every possible way a user can exit a webpage, it covers the most common. I especially liked the part where you show how to call the form's page_load event on closing. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ I get my developer tools from Merlin A.I. Soft Rhabot - World of Warcraft Bot ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Sign In·View Thread·PermaLink 1.00/5 (1 vote) Re: Good Article Thanks for all the fish 10:07 29 Aug '07   merlin981, you are dirty spammer, remove your merlin at once. Sign In·View Thread·PermaLink 1.00/5 (1 vote) Re: Good Article merlin981 12:47 29 Aug '07   Excuuuse me? How am I a dirty spammer by commenting on his article? ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ I get my developer tools from Merlin A.I. Soft Rhabot - World of Warcraft Bot ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Sign In·View Thread·PermaLink 2.25/5 (3 votes) Re: Good Article Vuyiswamb 21:03 31 Oct '07   Dont Worry about him, he goes everywhere to cause trouble Vuyiswa Maseko, Sorrow is Better than Laughter, it may Sudden your Face, but It sharpens your Understanding VB.NET/SQL7/2000/2005 http://vuyiswamb.007ihost.com http://Ecadre.007ihost.com vuyiswam@tshwane.gov.za Sign In·View Thread·PermaLink detect changes made? and go to other page? Thanks for all the fish 4:32 29 Aug '07   incomplete, work harder Sign In·View Thread·PermaLink 2.67/5 (6 votes)

Last Visit: 18:57 9 Feb '10     Last Update: 18:57 9 Feb '10 1