Solved

How do I warn the user of unsaved changes when leaving a page in ASP.NET(VB)?

Posted on 2015-01-08
6
614 Views
Last Modified: 2015-04-11
I have seen a lot of JS examples, and I'm not sure any of them work for me. I have a lot of controls inside repeaters and datagrids so it makes it cumbersome to track in a client script. Is there a simple way to check if any data in any control has changed since the page load and then generate a warning message?
0
Comment
Question by:mwmiller78
6 Comments
 
LVL 79

Accepted Solution

by:
David Johnson, CD, MVP earned 500 total points
ID: 40539581
var unsaved = false;
$(":input").change(function(){ //trigers change in all input fields including text type
    unsaved = true;
});

function unloadPage(){ 
    if(unsaved){
        return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
    }
}

window.onbeforeunload = unloadPage;

Open in new window

http://bit.ly/1KrqqSA
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 40540682
Try the onbeforeunload event: It is fired just before the page is unloaded. It also allows you to ask back if the user really wants to leave. See the demo onbeforeunload Demo.

Alternatively, you can send out an Ajax request when he leaves.

For detailed/field level tracking, you may look at example code @

http://www.telerik.com/forums/warn-users-before-leaving-a-page-with-uncommitted-changes
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 40540698
No Points please.

This is a better explaintion.

http://www.4guysfromrolla.com/webtech/100604-1.shtml
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:mwmiller78
ID: 40541956
David, what am i missing here?

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="testproj.test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:o="urn:schemas-microsoft-com:office:office" lang="en-us" dir="ltr">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
     <script type="text/javascript">
            var unsaved = false;
            $(":input").change(function () { //trigers change in all input fields including text type
                unsaved = true;
            });

            function unloadPage() {
                if (unsaved) {
                    return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
                }
            }

            window.onbeforeunload = unloadPage;
    </script>
</body>
</html>

Open in new window

0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 40553283
Have you imported the JQuery library?
0
 

Author Comment

by:mwmiller78
ID: 40574301
Yes, I use jquery elsewhere in my app
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
Many of us here at EE write code. Many of us write exceptional code; just as many of us write exception-prone code. As we all should know, exceptions are a mechanism for handling errors which are typically out of our control. From database errors, t…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Both in life and business – not all partnerships are created equal. As the demand for cloud services increases, so do the number of self-proclaimed cloud partners. Asking the right questions up front in the partnership, will enable both parties …

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now