Home/ Questions/Q 6169995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T22:57:20+00:00

i call my UI dialog from page which has scriptManager, this way: function openDialog()

  • 0

i call my UI dialog from page which has scriptManager, this way:

function openDialog() {

     var $dialog = jQuery('#dialog');   
     $dialog.load('dialog.aspx');
     $dialog.dialog({
        autoOpen: false,
        title: 'Add New Contact Personel',
        modal: true,
        height: 200,
        width: 400,
        show: 'puff',
        hide: 'puff',
        close: function (event, ui) {
            $dialog.html('');
            $dialog.dialog('destroy');
        }
     });
    $dialog.dialog('open');
}

body of dialog.aspx looks like this:

<body>
    <form id="form1" runat="server">
<%--    <asp:ScriptManagerProxy ID="proxyScriptor" runat="server"></asp:ScriptManagerProxy>
    <asp:UpdatePanel ID="upadatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>--%>

    <div>

        <table border="0">
            <tr>
                <th>SomeText:</th>
                <th><asp:TextBox ID="someTextBox" runat="server"></asp:TextBox></th>
            </tr>

        </table>
    </div>


    <asp:Panel ID="updatePanel" runat="server">
        <asp:Button ID="UpdateLoger" runat="server" Text="Update" onclick="Update_Click" />
    </asp:Panel>

<%--    </ContentTemplate>
    </asp:UpdatePanel>--%>


    </form>
</body>

now: if i click updateBtn i want to update text in postback, close UI dialog and do refresh like this:

UpdateText(someTextBox.Text);
            string script = @"jQuery('#dialog').html('');jQuery('#dialog').dialog('destroy');window.location.reload()";
            ScriptManager.RegisterClientScriptBlock(this, typeof(UpdatePanel), "jscript", script, true);

so if add another script manager on this page for UI dialog, very very wird things have happend (like __doPostBack doesn’t work), if i remove scriptManager, updatePanel doesnt show it contents, if i put scriptMangerProxy , updatePanel doesn’t show it contents either. So how i should do it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ve got a lot going on here. One problem you’re running into is that you’re treating dialog.aspx like it’s loading into it’s own window or iframe. In reality, its just being inserted as a document fragment into the page’s DOM. I suspect if you inspect the source, you’ll find multiple <body> tags.

    There’s several ways of doing this. My dialogs are typically unique to a particular page, so I’ll handle the dialog somewhat like this:

    Page.aspx

    <html>
<head>...</head>
<body>
    <!-- page content -->

    <asp:Button ID="btnOpenDialog" runat="server" OnClick="btnOpenDialogClick" Text="Open Dialog" />

    <asp:UpdatePanel ID="upDialogs" runat="server" UpdateMode="Conditional">
    <ContentTemplate>

    <asp:Panel ID="pnlDialog" runat="server" CssClass="pnlDialog" Visible="false">
        <!-- Dialog form -->
        <asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmitClick" Text="Submit" />
    </asp:Panel>

    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostbackTrigger ControlID="btnOpenDialog" />
    </Triggers>
    </asp:UpdatePanel>

    <script>

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {


       $("div.pnlDialog").dialog({
          autoOpen: true,
          title: 'Add New Contact Personel',
          modal: true,
          height: 200,
          width: 400,
          show: 'puff',
          hide: 'puff',
          close: function (event, ui) {
             $dialog.html('');
             $dialog.dialog('destroy');
          }
       });

    }

    </script>

</body>
</html>

    Page.aspx.cs

    ...
protected void btnOpenDialogClick(object sender, EventArgs e)
{
    pnlDialog.Visible = true;
    upDialogs.Update();
}

protected void btnSubmitClick(object sender, EventArgs e)
{
    ... save values ...
    pnlDialog.Visible = false;
    upDialogs.Update();
}
...

    Basically, we register a JS function to fire every time the page performs an asynchronous postback. This functions looks for the dialog box code. If it finds it, it wires it up with jQueryUI. If it doesn’t find anything, it just finishes silently. If you have multiple dialogs on the page, this can easily be refactored to flexibly handle them.

    • 0