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

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 !!!