coder
coder

Reputation: 706

Why asp:UpdatePanel updates hiddenfield value only on second click on button

I have problem while updating hiddenfield on button click. When I click on button, it does not update hiedenfield for first time, only if I click button second time then I am getting correct value. I searched on web for this and I could not find solution for this. Does anyone know why it is happening and is it default behaviour or if someone can provide me some other usefull approach to solve this problem.

.aspx file:

<asp:ScriptManager ID="scriptManager" runat="server">
</asp:ScriptManager>
<asp:RadioButtonList ID="radioQuestion" runat="server">
    <asp:ListItem Text="first" Value="first"></asp:ListItem>
    <asp:ListItem Text="second" Value="second"></asp:ListItem>
</asp:RadioButtonList>
<asp:UpdatePanel ID="updateResult" runat="server" >
    <ContentTemplate>
        <asp:HiddenField ID="hiddenResult" runat="server" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnCheck" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnCheck" runat="server" OnClick="btnCheck_Click" Text="Check"
    CssClass="check"  /> 

Javascript code:

  <script type="text/javascript">
    $(document).ready(function () {
        $('.check').click(function () {
            alert($('#hiddenResult').val());
        });
    });
</script>

.cs file:

 protected void btnCheck_Click(object sender, EventArgs e)
{
    switch (radioQuestion.SelectedValue)
    {
        case "first":
            hiddenResult.Value = "YES";
            break;
        case "second":
            hiddenResult.Value = "NO";
            break;
    }
}

Upvotes: 0

Views: 3746

Answers (3)

Saurabh
Saurabh

Reputation: 121

What will be helpful for this case is a callback mechanism that is invoked everytime an AJAX request ends . Fortunately, there is one available and it can be registered using:

   Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler).

Later, the EndRequestHandler can be implemented for executing any javascript code on request completion. The argument sender can be used to handle specific requests. The following javascript should serve the purpose:

$(document).ready(function () {
   Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler(sender, args) {
   var senderId = sender._activeElement.id;
    if (senderId=="btnCheck") {
        alert($('#<%=hiddenResult.ClientID%>').val());
    }
}

Update: Just realised that activeElement gets you the element on the form currently in focus, which for this case is not necessarily a good poperty to check for. Below is the updated javascript that takes a better approach by using _postBackSettings:

function EndRequestHandler(sender, args) {
   var senderId = sender._postBackSettings.sourceElement.id;
    if (senderId=="btnCheck") {
        alert($('#<%=hiddenResult.ClientID%>').val());
    }
}

Upvotes: 1

coder
coder

Reputation: 706

Everyone who tried to answer my question helped me a lot. That's why thank you all, but I also have to say that Saurabh answer lead me to find correct solution. I didn't know much about AJAX until now. Back to answer; actually Saurabh was close to find it, only few corrections was necessary to achieve that. Anyway I am posting my working code bellow(only part of Javascript):

  $(document).ready(function () {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    });

    function EndRequestHandler(sender, args) {
        if (document.getElementById('btnCheck')) {
            alert($('#<%=hiddenResult.ClientID%>').val());
        }
    }

Upvotes: 0

Sumit Kapadia
Sumit Kapadia

Reputation: 385

I dont know what you are trying to do. Still you can buy this 1) Trigger is not required for updatepanel with id=updateResult as UpdateMode is not set and default is always true. 2) You are changing and checking values of <asp:HiddenFiled> on with same control.

So what glitches here, your client side code calls prior to server it means alert($('#hiddenResult').val()); is called before setting <asp:HiddenFiled> value at code-behind. Once client code calls by returning true value (True by default in any/your case), request sent to server and your btnCheck_Click executes and changes hidden field value with latest one. Next time so on.. You will always get older value with above logic.

Approach you can use

As I said client side code calls prior to server, So move your server code to client side like

   $('.check').click(function () {
        // Get Hidden field
        var hidden = $('[id$=hiddenResult]');

        //Your logic
        if ($('[id$=radioQuestion] input:radio')[0].checked) {
            $(hidden).val('Yes');
        }
        else if ($('[id$=radioQuestion] input:radio')[1].checked) {
            $(hidden).val('No');
        }

        alert($(hidden).val());
  }

Don't forget to add jquery file for reference at header of your page.

Hope This will help

Upvotes: 0

Related Questions