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

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?
Mike MillerSoftware EngineerAsked:
Who is Participating?
 
David Johnson, CD, MVPConnect With a Mentor OwnerCommented:
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
 
Pravin AsarPrincipal Systems EngineerCommented:
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
 
Pravin AsarPrincipal Systems EngineerCommented:
No Points please.

This is a better explaintion.

http://www.4guysfromrolla.com/webtech/100604-1.shtml
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
Mike MillerSoftware EngineerAuthor Commented:
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
 
käµfm³d 👽Commented:
Have you imported the JQuery library?
0
 
Mike MillerSoftware EngineerAuthor Commented:
Yes, I use jquery elsewhere in my app
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.