JQuery UI modal dialog is not closing after asyncpostback in update panel - asp.net

Question

I am using modal dialog of jQuery UI with my ASP.Net application.
The page contains UpdatePanel component for asynchronous postbacks.
aspx code
<script>
function ShowDialog() {
$('#modal').dialog({
autoOpen: false,
modal: true,
dialogClass: 'dialog',
resizable: false,
width: 500,
height: 400
});
$('#modal).dialog('open');
}
function CloseDialog(){
$('#modal).dialog('close');
}
</script>
<asp:UpdatePanel ID="updatepanel" runat="server" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Repeater ID="repEducationHistory" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>Field 1</th>
<th>Field 2</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:Literal ID="litField1" runat="server">
</asp:Literal>
</td>
<td><asp:Literal ID="litField1" runat="server">
</asp:Literal>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<asp:LinkButton ID="btnAdd" runat="server" Text="Add new"
OnClick="BtnAdd_Click" />
<div id="modal" title="Add item" style="display:none;">
<div>
<label>Educational institution:</label>
<asp:TextBox ID="tbField1" runat="server"/>
<br />
<label>Country:</label>
<asp:DropDownList ID="tbField2" runat="server"
DataValueField="Id" DataTextField="Name" />
<br />
<asp:LinkButton ID="btnSave" runat="server"
Text="Save" OnClick="BtnSave_Click"></asp:LinkButton>
</div>
</div>
<asp:LinkButton ID="btnSave" runat="server" CausesValidation="true"
ValidationGroup="vgMpt" Text="Save" OnClick="BtnSaveUsrEdu_Click">
</asp:LinkButton>
cs code
protected void BtnAdd_Click(object sender, EventArgs e)
{
tbField1.Text=string.Empty;
ddlField2.SelectedIndex=0;
ScriptManager.RegisterStartupScript(updatepanel, updatepanel.GetType(),
Guid.NewGuid().ToString(), "ShowDialog();", true);
}
protected void BtnSaveUsrEdu_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(updatepanel, updatepanel.GetType(),
Guid.NewGuid().ToString(), "CloseDialog();", true);
}
When button Add is clicked the codebehind prepares controls on dialog (putting there values or removing them, it depends on the fact if dialog is used to add item or to edit it) and then sends script to create and show dialog. When Save button is clicked the code behind (after omitted here routine of checking the data entry, storing it and rebinding the repeater) sends script to close the dialog. The problem is that the dialog is not closing. The JavaScript function CloseDialog is called but $('#modal).dialog('close'); does not do what is required to.
Any ideas how to solve this problem ?

Answer 1

The code below works well for me:
<asp:UpdatePanel ID="updatepanel" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" />
</Triggers>
<ContentTemplate>
<asp:LinkButton ID="btnAdd" runat="server" Text="Add new" OnClick="BtnAdd_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<div id="modal" title="Add item" style="display: none;">
<asp:UpdatePanel runat="server" ID="DialogUpdatePanel">
<ContentTemplate>
<div>
<label>
Educational institution:
<asp:TextBox ID="tbField1" runat="server" />
</label>
<br />
<label>
Country:
<asp:DropDownList ID="tbField2" runat="server" DataValueField="Id" DataTextField="Name" />
</label>
<br />
<asp:LinkButton ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click"></asp:LinkButton>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Code-behind:
protected void BtnAdd_Click(object sender, EventArgs e)
{
tbField1.Text = string.Empty;
ScriptManager.RegisterStartupScript(updatepanel, updatepanel.GetType(),
Guid.NewGuid().ToString(), "ShowDialog();", true);
}
protected void btnSave_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(DialogUpdatePanel, DialogUpdatePanel.GetType(),
Guid.NewGuid().ToString(), "CloseDialog();", true);
}

Answer 2

Solved it myself.
The script to show/close dialog was like that:
function ShowDialog() {
$('#modal').dialog({
autoOpen: false,
modal: true,
dialogClass: 'dialog',
resizable: false,
width: 500,
height: 400
});
$('#modal).dialog('open');
}
function CloseDialog(){
$('#modal).dialog('close');
}
What I did is: add to close function the definition of dialog:
function CloseDialog(){
$('#modal').dialog({
autoOpen: false,
modal: true,
dialogClass: 'dialog',
resizable: false,
width: 500,
height: 400
});
$('#modal).dialog('close');
}
And now dialog is closing without problem.
BUT!!!
The contribution of Yuriy Rozhovetskiy was extremely valuable: adding UpdatePanel to the content of dialog's DIV solved a lot of other issues of updating the dialog from codebehind. I believe, the best solution for using jQuery UI dialog inside UpdatePanel is to add one more UpdatePanel inside dialog. Thanks, Yuriy !!!