Warn Users before leaving a page with uncommitted changes

3 posts, 0 answers
  1. Dan
    Dan avatar
    7 posts
    Member since:
    Jul 2012

    Posted 29 Jul 2012 Link to this post

    My users want the ability to receive a warning if they leave a page without hitting the save button.  I found some great code at 4GuysFromRolla, and have been able to make a necessary adjustment  to get it working with the RadComboBox.  I am struggling on finding the right change for the RadEditor.  What is the correct html element id to put in the following code?

    'Dont forget to register controls on the Page_load even.
    'Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    '    'Monitor the changes for the Web controls whose values you want to watch
    '    MonitorChanges(InputControlname)
    '    'For those controls (like "Save" buttons) that cause a postback that should NOT prompt the
    '    'user, call BypassModifiedMethod
    '    BypassModifiedMethod(btnSave)
    'End Sub
    Public Sub MonitorChanges(ByVal wc As WebControl)
        If wc Is Nothing Then Exit Sub
        If TypeOf wc Is CheckBoxList OrElse TypeOf wc Is RadioButtonList Then
            'Add an array element for each item in the checkbox/radiobutton list
            For i As Integer = 0 To CType(wc, ListControl).Items.Count - 1
                ClientScript.RegisterArrayDeclaration("monitorChangesIDs", """" & String.Concat(wc.ClientID, "_", i) & """")
                ClientScript.RegisterArrayDeclaration("monitorChangesValues", "null")
            Next
        ElseIf TypeOf wc Is Telerik.Web.UI.RadComboBox Then
            ClientScript.RegisterArrayDeclaration("monitorChangesIDs", """" & wc.ClientID & "_Input" & """")
            ClientScript.RegisterArrayDeclaration("monitorChangesValues", "null")
        ElseIf TypeOf wc Is Telerik.Web.UI.RadEditor Then
            'Not working.  Still need to find the correct ID Value.
            ClientScript.RegisterArrayDeclaration("monitorChangesIDs", """" & wc.ClientID & "ContentHiddenTextarea" & """")
            ClientScript.RegisterArrayDeclaration("monitorChangesValues", "null")
        Else
            ClientScript.RegisterArrayDeclaration("monitorChangesIDs", """" & wc.ClientID & """")
            ClientScript.RegisterArrayDeclaration("monitorChangesValues", "null")
        End If
        AssignMonitorChangeValuesOnPageLoad()
    End Sub
    Private Sub AssignMonitorChangeValuesOnPageLoad()
        If Not ClientScript.IsStartupScriptRegistered("monitorChangesAssignment") Then
            ClientScript.RegisterStartupScript(Me.GetType(), "monitorChangesAssignment", _
               "<script language=""JavaScript"">" & vbCrLf & _
               "  assignInitialValuesForMonitorChanges();" & vbCrLf & _
               "</script>")
            ClientScript.RegisterClientScriptBlock(Me.GetType(), "monitorChangesAssignmentFunction", _
               "<script language=""JavaScript"">" & vbCrLf & _
               "  function assignInitialValuesForMonitorChanges() {" & vbCrLf & _
               "    for (var i = 0; i < monitorChangesIDs.length; i++) {" & vbCrLf & _
               "      var elem = document.getElementById(monitorChangesIDs[i]);" & vbCrLf & _
               "      if (elem) if (elem.type == 'checkbox' || elem.type == 'radio') monitorChangesValues[i] = elem.checked; else monitorChangesValues[i] = elem.value;" & vbCrLf & _
               "    }" & vbCrLf & _
               "  }" & vbCrLf & vbCrLf & vbCrLf & _
               "  var needToConfirm = true;" & vbCrLf & _
               "  window.onbeforeunload = confirmClose;" & vbCrLf & vbCrLf & _
               "  function confirmClose() {" & vbCrLf & _
               "    if (!needToConfirm) return;" & vbCrLf & _
               "    for (var i = 0; i < monitorChangesValues.length; i++) {" & vbCrLf & _
               "      var elem = document.getElementById(monitorChangesIDs[i]);" & vbCrLf & _
               "      if (elem) if (((elem.type == 'checkbox' || elem.type == 'radio') && elem.checked != monitorChangesValues[i]) || (elem.type != 'checkbox' && elem.type != 'radio' && elem.value != monitorChangesValues[i])) { needToConfirm = false; setTimeout('resetFlag()', 750); return ""You have modified the data entry fields since last savings.  If you leave this page, any changes will be lost.  To save these changes, click Cancel to return to the page, and then Save the data.""; }" & vbCrLf & _
               "    }" & vbCrLf & _
               "  }" & vbCrLf & vbCrLf & _
               "  function resetFlag() { needToConfirm = true; } " & vbCrLf & _
               "</script>")
        End If
    End Sub
    Public Sub BypassModifiedMethod(ByVal wc As WebControl)
        wc.Attributes("onclick") = "javascript:" & GetBypassModifiedMethodScript()
    End Sub
    Public Function GetBypassModifiedMethodScript() As String
        Return "needToConfirm = false;"
    End Function

    Thanks for your help,
    Dan Neuman
  2. Rumen
    Admin
    Rumen avatar
    14417 posts

    Posted 01 Aug 2012 Link to this post

    Hi,

    You can use the following code:

    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
    </telerik:RadEditor>
    <script type="text/javascript">
        var contentChanged = false;
      
        function OnClientLoad(editor) {
            editor.attachEventHandler("keydown", function(sender, e) {
                contentChanged = true;
            });
        }
      
        window.onbeforeunload = unloadMessage;
        function unloadMessage() {
            message = "Content has changed, save before exit?"
            if (contentChanged)
                return message;
      
        }
    </script>
    <asp:Button ID="Button1" Text="text" runat="server" />

    If the content is updated, the browser will ask the user whether she/he wants to proceed if the user tries to close the window or navigate to another page.

    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Dan
    Dan avatar
    7 posts
    Member since:
    Jul 2012

    Posted 09 Aug 2012 Link to this post

    Thanks for the code.  I tweaked it a minor bit so the other controls on the page could take advantage of the comparison of values instead of a plan key being pressed, and everything works beautifully!

Back to Top