Hidden field updates on server side after second button click

Question

I have a hidden field that I am updating via Javascript once I click a button, but when I try to access it on the code behind there is no value until I click the button the second time. I am able to see the hidden field value when I inspect it via the browser.

Default.aspx

<script type="text/javascript">
    function LoadHtml(inputState, inputStateAbbr, inputProgramType, inputHealthCenter, inputCity) {

        $.ajax({
            url: omitted,
            type: "POST",
            async: false,
            data: {
                state: inputState,
                stateAbbr: inputStateAbbr,
                programType: inputProgramType,
                healthCenter: inputHealthCenter,
                city: inputCity
            },

            success: function(result) {
                document.getElementById('DataHiddenField').value = result;

            },
            error: function (jqXHR, textStatus, errorThrown) {
                //omitted
            }
        });
    }
</script>

<asp:Button ID="Button1" runat="server" OnClick="Button1_OnClick" CssClass="top-buffer" Text="Compare Sites" />

<asp:HiddenField ID="DataHiddenField" runat="server" ClientIDMode="Static" />

Code Behind

protected void Button1_OnClick(object sender, EventArgs e)
{
    RetrieveHtml();
}

private string RetrieveHtml(){
    Page.ClientScript.RegisterStartupScript(this.GetType(), "MyKey1", "LoadHtml('Alabama', 'AL', 'Program Awardee Data', 'Alabama Regional Medical Services', 'Birmingham');", true);
    return DataHiddenField.Value;
}

Why are you registering the RegisterStartUpScript in the OnClick server-side event handler? This seams very odd to me. I would expect to see that `OnInit` or `OnLoad`. — Jon P, Nov 19 '19 at 00:57

score 1 · Accepted Answer · answered Nov 19 '19 at 01:17

You seem to have a fundamental misunderstanding on how web pages and asp.net webforms, specifically, work. Generally when a form posts a form to a server, a request for a new page is made, the server does some work with the form variables and sends a new page as a response. There is a disconect between client side and server side at this point.

Let's dissect your code:

<!-- Causes a postback to the server, no javascript run yet -->
<asp:Button ID="Button1" runat="server" OnClick="Button1_OnClick" CssClass="top-buffer" Text="Compare Sites" />

Code Behind

private string RetrieveHtml(){
  /*Tells the page to run this script - WHEN IT NEXT LOADS*/
   Page.ClientScript.RegisterStartupScript(this.GetType(), "MyKey1", "LoadHtml('Alabama', 'AL', 'Program Awardee Data', 'Alabama Regional Medical Services', 'Birmingham');", true);
   /*Gets the value from the hidden field.*/
   /*On first click the above java-script HAS NOT RUN*/
   return DataHiddenField.Value;
}

/*After the server has finished work, it sends a new page response.*/
/*THEN the javascript runs*/

So what do you need to do?

Run the AJAX Api call on page load.
You can run the javasript before the postback. Look at OnClientClick
You can access the API server side and populate your data that way

Thank you I ended up calling the API from the server side and populated the hidden field from there — TheProgrammer, Nov 20 '19 at 19:49

score 0 · Answer 2 · answered Nov 18 '19 at 21:45

The reason that you can't see the content of hidden field on the first button click is beacause your hidden field content is filled on the client side after you click the button. Ex:

1º Client Side: User clicks on Button1

2º Server side: Method RetrieveHtml sends "order" to client side to run LoadHtml method with provided parameters. At this moment DataHiddenField.Value is not visible in server side because LoadHtml wasn't executed yet.

3º Client Side: Executes LoadHtml that calls Server Side on omitted url.

4º Server Side: Execute code in omitted url and returns content to client side.

5º Client Side: Success function adds content at DataHiddenField. Only now you will be able to se this content on server side.

Obs: DataHiddenField.Value will always be related to the last execution inside RetrieveHtml method.

Are you able to see the hidden field value on inspect it at the browser before clock on Button1?

I am able to see the hidden value after the first click on inspect — TheProgrammer, Nov 18 '19 at 22:14
Ok. So with what Jon P and me have explained you should have enough information to solve your problem. If still has any doubt please update your question. And if you do it I recommend that you explain why you want to run LoadHtml on a button click on server side. — Lutti Coelho, Nov 19 '19 at 13:41

Hidden field updates on server side after second button click

2 Answers2