Thursday, July 26, 2012

Asp.net jQuery Browser close confirmation


In many occasions we will want to prompt the user to save the data, before he closes his browser/tab. This can be done using jQuery by tracking the data modifications in the page.




A page will contain many types of controls like TextBox, RadioButton, CheckBox, DropDownlist etc.. How can we track if the data got modified in any of the controls? It is a tedious process to check the data change for each and every control. jQuery makes the job easy, using jQuery we will track the change events of each type of control and record the change status, if there is a change we will prompt the user to save the data before closing the form.

Track state change of controls.

// Set Change flag to false
var _pageModified = false;
//
// Check for TextBox modifications
$("input[type='text']").change(function() {
_pageModified = true;
});
//
// Check for DropDownList modifications
$('select').change(function() {
_pageModified = true;
});
//
// Check for Checkbox modifications
$("input[type=checkbox]").change(function() {
_pageModified = true;
});
//
// Check for RadioButton modifications
$("input[type=radio]").change(function() {
_pageModified = true;
});

$(window).bind("resize", function(event) {
     // Add your code here.
});

Tracking the Page Unload event
//
// Track the Page Unload Event
$(window).bind("beforeunload", function(event) {
});

Full Example (Let us put things together)

Note: Change the reference of the jQuery
jquery-1.7.2.js files to point to your local directory.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Page Events</title>
    <script type="text/javascript"
               src="JavaScript/jquery-1.7.2.js"></script>
    <script language="javascript"
               type="text/javascript">
        $(document).ready(function() {
            // Check Changes and Alert for Unsaved Data
            // Set Change flag to false
            var _pageModified = false;
            //
            // Check for TextBox modifications
            $("input[type='text']").change(function() {
                _pageModified = true;
            });
            //
            // Check for DropDownList modifications
            $('select').change(function() {
                _pageModified = true;
            });
            //
            // Check for Checkbox modifications
            $("input[type=checkbox]").change(function() {
                _pageModified = true;
            });
            //
            // Check for RadioButton modifications
            $("input[type=radio]").change(function() {
                _pageModified = true;
            });
            //
            // Track the Page Unload Event
            $(window).bind("beforeunload", function(event) {
                //
                // Checks if Data is Modified.
                // alert(_pageModified);
                if (_pageModified == true) {
                    // Checks the Mouse Position.
                    // If Mouse Y Position < 20 (Approx), trigger alert.
                    // To avoid triggering this event while clicking Button/Links
                    // which redirect the user to a different page.
                    // If alert is required in all cases, remove this check.
                    if (currentMousePos.y < 20) {
                        var message = 'All data changes will be lost!';
                        if (typeof event == 'undefined') {
                            event = window.event;
                        }
                        if (event) {
                            event.returnValue = message;
                        }
                        return message;
                    }
                }
            });
            //
            var currentMousePos = { x: -1, y: -1 };
            $(document).mousemove(function(event) {
                currentMousePos = {
                    x: event.pageX,
                    y: event.pageY
                };
            });
        });
    </script>
</head>
<body>
    <form id="frmPage" runat="server">
<table border="1" cellspacing="0"
         width="600px"
         style="background-color: #FCF4EB;"
         align="center" >
         <tr>
            <td align="right" colspan="2">
<a href="DropDownList.aspx"
          style="color:Blue;
          font-size:12px;">
          
Redirection Link
      </a>  
            </td>
          </tr>
            <tr>
                <td>
                    Project ID:
                </td>
                <td>
                    <asp:TextBox
                         ID="txtProjectId"
                         runat="server"
                         CssClass="textTextBox"
                         MaxLength="25"
                         Width="300"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Project Number:
                </td>
                <td>
                    <asp:TextBox
                         ID="txtProjectNumber"
                         runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Project Name:
                </td>
                <td>
                    <asp:TextBox ID="txtProjectName"
                         runat="server" ></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Project Type
                </td>
                <td colspan="5">
                    <asp:DropDownList
                         ID="ddlTrojectType" runat="server">
                        <asp:ListItem>Select</asp:ListItem>
                        <asp:ListItem Value="T1">Type-1</asp:ListItem>
                        <asp:ListItem Value="T2">Type-2</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>   
            <tr>
                <td>
                    Resources Required:
                </td>
                <td>
                    <asp:CheckBox
                        ID="chkResource1"
                        runat="server"
                        Text="Resource1" />
                    <asp:CheckBox
                        ID="chkResource2"
                        runat="server"
                        Text="Resource2" />
                    <asp:CheckBox
                        ID="chkResource3"
                        runat="server"
                        Text="Resource3" />
                    <asp:CheckBox
                        ID="chkResource4"
                        runat="server"
                        Text="Resource4" />
                    <asp:CheckBox
                        ID="chkResource5"
                        runat="server"
                        Text="Resource5" />

                </td>
            </tr>  
            <tr>
                <td>
                    Status
                </td>
                <td>
                    <asp:RadioButton
                         ID="rdoActive"
                         runat="server"
                         GroupName="grpProjectType" />
                    <span>Active</span>
                    <asp:RadioButton
                         ID="rdoInActive"
                         runat="server"
                         GroupName="grpProjectType" />
                    <
span>InActive</span>                                                                        
                </td>
            </tr>                 
            <tr>
                <td colspan="2" align="center">
                    <asp:Button
                         ID="btnSave"
                         runat="server"
                         Text="Save"
                         Width="100px"/>
                </td>
            </tr>       
        </table>   
    </form>
</body>
</html>

Related Posts




Search Flipkart Products:
Flipkart.com

No comments: