Question

I am trying to create a popup dialog with CodeBehind Events and JavaScript events. I have created a button that launches the following dialog. That works fine.

<script type="text/javascript">

    function ShowDialog(aPage, aWidth, aHeight, aTitle) {
        var $popupURL = aPage;
        var $popupDv = $("#resultDiv");

        jQuery.ajax({ url: $popupURL,
            cache: false,
            success: function (html) {
                $popupDv.empty().append(html);

                $popupDv.dialog({
                    width: aWidth,
                    height: aHeight,
                    modal: true,
                    title: aTitle,
                    draggable: false,
                    resizable: false
                });
            }
        });
    }

</script>

Button Code:

<form id="form1" runat="server">
<div>
    <div id="resultDiv">
    </div>
    <input id="Edit1Button" type="button" value="Edit 1" onclick="ShowDialog('edit3.aspx?ID=1', 600, 400, 'Hello Edit 1')" />
</div>
</form>

Keep in mind this is just test code.. OK so after I click the button a dialog pops up. In the dialog, I have the following code..

<form id="form2" runat="server">
<div>
    <h1>
        Edit Dialog 3</h1>
    <asp:Button ID="CloseButton" runat="server" Text="Close" OnClick="CloseButton_Click"
        OnClientClick="$('#resultDiv').dialog('close'); return true;" />
</div>
</form>

if I have return false, then just the javascript OnClientClick fires and the dialog closes.. Works as expected. if I set return true the dialog closes but this is where the issue is. the main form disappears and is replaced by the dialogs form..

I need this button to execute the CloseButton_Click in codebehind then close the dialog. I am VERY new to asp.net and C# so be gentle with your responses.. like weeks

Thanks
Anthony

Answer 1

What is happening is that since your child form (Edit3.aspx) is posting back to the webserver, ASP.NET is sending back the response for Edit3.aspx – not your initial form. In order to accomplish what you want, you will have to use an asynchronous postback to the server. This can be accomplished by changing your Edit3.aspx form to the following:

<form id="form2" runat="server"> 
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div> 
<h1 runat="server" id="edit3"> 
    Edit Dialog 3</h1> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="CloseButton" runat="server" Text="Close" OnClientClick="$('#resultDiv').dialog('close'); return true;" /> 
</ContentTemplate>
</asp:UpdatePanel>
</div> 

The ScriptManager control and the UpdatePanel control allow your form to post back to the server asynchronously.