Hiddenfield and Javascript

[Craig]

I have spent the couple days researching my issue and have not been able to get it to work correctly.  There are a few topics on StackOverflow that are related to this issue and reading them has helped me but I'm at a bit of a roadblock and would appreciate a push in the right direction.

I wrote a small .NET 3.5 VB.NET web application for a client that allows users to maintain some data.  I'm using the RadGrid and RadComboBox controls and it consists of 3 pages.  One requirement I was not completely fond of was that the user wanted to make all of her changes then hit a save button at the end instead of saving back to the DB each time she applied her changes to the grid.  

I'm using an session object to store a collection of objects on each page and want to prompt the user with a dialog if they attempt to change the value of a dropdown or leave the page when there are pending actions.  After a lot of research here and in other places, I decided to create a hidden field on the page and update its value each time the action collection is updated on the server side.  Then I want to evaluate that value and if it's greater than 0, I want to prompt the user to save changes.

My function:

    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server"><br>
        <script type="text/javascript"><br>
            window.onbeforeunload = confirmExit;<br>
            function confirmExit()<br>
            {<br>
                var actionCount = $get('<%=ActionCounterField.ClientID %>').value;<br>
                if (actionCount > 0) {<br>
                    alert("Pending Changes!");<br>
                      }<br>
                }<br>
    <br>
            </script><br>
        </telerik:RadCodeBlock>

My hidden field declaration:

    <asp:HiddenField id="ActionCounterField" runat="server" />

My server side code:

<br>
    Protected Sub UpdateActionCount()<br>
<br>
        ActionCounterField.Value = GoalCategoryActionList.Count<br>
<br>
    End Sub<br>

When I debug the application and add a record to my grid, the server side code is executed correctly.  I have also verified that the hidden control is found by the javascript function.  What I haven't been able to figure out, though, is why the hidden field value is not found by the function.

Any help is greatly appreciated.  Thank you!

[Princy]

Hi,

I tried to replicate your scenario,and it worked fine at my side.Please try by removing the <br> tag from inside javascript.
The code i tried is as below.

ASPX:

<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
<script type="text/javascript">

  window.onbeforeunload = confirmExit;

    function confirmExit()

  {

    var actionCount = $get('<%=HiddenField1.ClientID %>').value;

     if (actionCount > 0)

     {

       alert("Pending Changes!");

     }

  }

 </script>
 </telerik:RadCodeBlock>


Thanks,
Princy

[Craig]

Thank you, Princy.  The <br> tag was added by the Format Code Block on the forum.  It actually doesn't exist in my markup.

Can you tell me where you put your hidden field?  I have a table and two table rows.  The first table row houses my RadGrid and the second table row houses two buttons and my hidden field.

[Craig]

OK, I figured out how to do this.  I changed the hidden field to a telerik RadTextBox, set it to invisible and wired it up in the AjaxManager to be changed by my RadGrid.

I conditionally call the confirmation function.  When my user hits the save or undo button, the changes are persisted to the DB or undone without confirmation.  If they attempt to leave the page in any other way, however, they are prompted to save their changes.  If they hit "OK" the save button handler is called on the server side.  If they hit "Cancel", the undo button handler is called.

Also, I have the save and undo buttons calling the disableConfirm function on their OnClientClick action.

<telerik:RadTextBox id="ActionCounterField" runat="server" style="display: none;" AutoPostBack="true" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="ActionCounterField"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
    <script type="text/javascript">
        var allowConfirm = true
window.onbeforeunload = confirmExit;

function confirmExit()
var actionCountHolder = document.getElementById("<%=ActionCounterField.ClientID %>");
var actionCount = actionCountHolder.value;

if (allowConfirm == true) {
if (actionCount > 0) {
var conf = confirm("You have pending changes.  Save them?");
if (conf == true) {
var saveButton = document.getElementById("<%=btnSave.ClientID %>");
saveButton.click()
}
else {
var cancelButton = document.getElementById("<%=btnCancel.ClientID %>");
cancelButton.click();<
}
}
}
else {
allowConfirm = true;
}
}

function disableConfirm() {
allowConfirm = false
}

    </script>
</telerik:RadCodeBlock>