Access jquery variable from the code behind

Question

This is my html:

<input type="hidden" id="HiddenIndex" name="HiddenIndex" runat="server" />

Some labels and textbox

 <asp:Button runat="server" ID="btnGetCoordinates" 
    Text="Get Coordinates" OnClick="btnGetCoordinates_Click" /> 
   <asp:Label ID="info" runat="server" Text="Waiting...." />

So when the button Get Coordinates is clicked, it will call the Web Services to return some json results from code behind. A Dialog will popup a listbox with these results. It works perfectly until this point. My goal is when a client select an item in the list and click on "Select" button, it will return the selected item's Index, store in a hidden field and manipulate later from the code behind. This is my jquery function

function ShowPopup()
{
    $("#parentForm").fadeTo(500, .2);       

    $("#C1Dialog1").dialog({            

         open: function () {
             $(".ui-dialog-titlebar-close").hide();                 
         },
         buttons: [{
             text: "Select",
             click: function () {
                 var value = " ";
                 storedIndex = " ";
                 var selected = $("[id*=lstCandidates] option:selected");
                 selected.each(function () {
                     value = $(this).val();
                     storedIndex = $(this).index();
                     $("#HiddenIndex").val(storedIndex);                        
                 });
                 alert(value + " and index is " + storedIndex);  //Show value and index
                 alert("html hidden value " + $("#HiddenIndex").val());  //show value                 

                 $(this).dialog("close");
                 $("#parentForm").fadeTo(500, 1);                    
             },
             style: "margin-right: 40px;"
         },
         {
             text: "Cancel",
             click: function () {
                 $(this).dialog("close");
                 $("#parentForm").fadeTo(500, 1);
             },
             style: "margin-left:0px;"
         }]
    });
}   
</script>

As you can see the alert show the value of the hidden field This is my code behind

   protected void btnGetCoordinates_Click(object sender, EventArgs e)
   {
        //Show the Dialog
        if (count > 0)
        {
            ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup();", true);

//never stop here --PROBLEM RIGHT HERE**, there is NO value for Hidden field**

        var indexValue = Request.Form["HiddenIndex"];
          info.Text = "HiddenIndex is " + indexValue;         
        }
    }

The Info label show nothing when I click on Dialog's select button Any help would be appreciated , thank you very much.

I added a line in the jquery script (click function) <%=Page.ClientScript.GetPostBackEventReference(btnGetCoordinates,"")%>; The hidden field can hold the value now. However, The dialog cannot close , any idea? — Jenny, Aug 21 '15 at 22:09

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

Probably an issue with the client ID. ASP.NET will not necessarily use the client ID in your markup when emitting the HTML.

There are several ways to fix this, but the easiest is to make the hidden field a plain HTML control. That way ASP.NET won't monkey with it. So change this

<input type="hidden" id="HiddenIndex" name="HiddenIndex" runat="server" />

to this

<input type="hidden" id="HiddenIndex" name="HiddenIndex"/>

Other options:

Set your clientIDmode to static
Modify your jquery selector to use id$='HiddenIndex' so that it ignores any prefix added by ASP.NET.

edited May 23 '17 at 12:22

Community

1
1

answered Aug 21 '15 at 00:41

John Wu

50,556
8
44
80

Thanks John, yes I should use plain HTML control for the hidden field. But it still doesn't resolve my problem. I still think it's about the logical something, after show the dialog, it never stops at the last 2 lines of code. – Jenny Aug 21 '15 at 14:53

Access jquery variable from the code behind

1 Answers1