I’m using the jquery ui dialog and I’ve got it set up so that it has a text box and a button.
You basically type something into the text box and click the button, it pulls some values from a database and loads a radiobutton list. HTML markup looks like this:
<div id="dialog" title="Select Address">
<asp:UpdatePanel ID="upNewUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<div id="search" style="width:100%; text-align:center;">
<asp:TextBox ID="txtFindSearch" runat="server"></asp:TextBox>
<asp:Button ID="btnFindSearch" runat="server" Text="Search"
onclick="btnFindSearch_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div id="searchresults" style="width:100%;">
<asp:RadioButtonList ID="rbSearchResults" runat="server" AutoPostBack="True"
CellSpacing="10" RepeatColumns="4" RepeatDirection="Horizontal"
ToolTip="Select an address."
onselectedindexchanged="rbSearchResults_SelectedIndexChanged">
</asp:RadioButtonList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
In the code behind I can get the selected value like this:
protected void rbSearchResults_SelectedIndexChanged(object sender, EventArgs e)
{
Label1.Text = rbSearchResults.SelectedValue.ToString();
}
My issue is I don’t know how to close the jquery dialog box AFTER a selection is made from the radio button list. I tried to do something like this in jquery:
$('#MainContent_rbSearchResults input').click(function () {
$('#dialog').hide();
});
Even if I throw an alert in there it doesn’t display the alert. If I view page source I see the div container but I don’t see the radiobuttonlist, could it be because it is wrapped in an updatepanel?
How can I close the jquery ui dialog after I get a value (a click of the radiobuttonlist)?
Edit
I tried with this:
protected void rbSearchResults_SelectedIndexChanged(object sender, EventArgs e)
{
Label1.Text = rbSearchResults.SelectedValue.ToString();
this.txtShipToName.Text = Label1.Text;
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "closedialog", "$(function(){$('#dialog').dialog('close');});", true);
}
And this closes the dialog however my textbox txtShipToName never gets a value. Even though if I step through the debug I see the value being assigned to it.
txtShipToNameis not inside the UpdatePanel, that is why it is not holding its value.To solve this issue you can put
txtShipToNameinside anotherUpdatePanelwith UpdateMode set to Conditional and then add this to your code:EDIT
As ek_ny stated on his answer, it is better to set UpdateMode to always for the new UpdatePanel and then you don’t need to call
Update()on it.