Button in dialog box won't Post back

Question

I have a dialog box which I'm displaying with the jQuery .dialog() function, and this dialog box contains a button which I want to post back to another page, but it's not working. I can't get it to post with the PostBackUrl attribute set, or with the OnClick (this never fires). However, when I click one of the Calendar dates, which I suppose cause a post back by default, the page posts back to the url I set in the buttons PostBackUrl attribute! I want to use the asp:Calendar, but disable the default post back behavior on selection, and have posting occur only when the user selects the button, but still obviously have the selected date of the Calendar available on post back. Here's the .aspx file...

<form id="form1" runat="server">
        <asp:Button ID="btnShowDialog" runat="server" Text="Click to Show Dialog" OnClientClick="showDialog(); return false;" />
        <div class="divDialog" style="display: none">
            <table style="width: 100%;">
                <tr>
                    <td>First Name: <asp:TextBox ID="txtFirstName" runat="server" Text=""></asp:TextBox></td>
                    <td>Last Name: <asp:TextBox ID="txtLastName" runat="server" Text=""></asp:TextBox></td>
                </tr>
                <tr>
                    <td>
                        How Old are You?
                        <asp:DropDownList ID="ddlAge" runat="server">
                            <asp:ListItem Value="1">1</asp:ListItem>
                            <asp:ListItem Value="2">2</asp:ListItem>
                            <asp:ListItem Value="3">3</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td>
                        How Many Siblings do You Have?
                        <asp:DropDownList ID="ddlNumberSiblings" runat="server">
                            <asp:ListItem Value="1">1</asp:ListItem>
                            <asp:ListItem Value="2">2</asp:ListItem>
                            <asp:ListItem Value="3">3</asp:ListItem>
                            <asp:ListItem Value="4">4</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Calendar ID="calBirthday" runat="server" Width="200" >
                            <DayStyle BackColor="Yellow"  />
                        </asp:Calendar>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
                    </td>
                </tr>
            </table>
        </div>
    </form>

...and the jQuery script...

   <script>
        function showDialog() {
            $('.divDialog').dialog({ modal: true, show: 'slide', title: 'Please Enter Information Below', width: 500 });
        }
    </script>

...and here is how the asp:Button and a date in the asp:Calendar are rendered in the browser....

<a title="April 28" style="color:Black" href="javascript:__doPostBack('calBirthday','4866')">28</a>

....

<input id="btnSubmit" type="submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSubmit", "", false, "", "Profile.aspx", false, false))" value="Submit" name="btnSubmit">

EDIT: The button submission doesn't work, regardless of whether I include the asp:Calendar control or not. But Calendar control selection submission works for some reason.

Answer 1

The problem with this kind of dialogs is that they move what you give them as content somewhere outside the form.

Take that example: http://jsfiddle.net/Qej8S/1/

I have place the content inside the keeper

<div class="keeper">
    <div class="divDialog" style="display: none">
    The content of the dialog        
    </div>
</div>

but if run it, you see that (ether the colors, ether with the dom utilities of the browser) the dialog is moving the content outside of the keeper, and in your case is move it outside the form and thats why is not fires up.

For solution I came up with some kind of a hack. After the dialog is created move it back to the form. Here is an example. I place a div with a specific id, inside the form as:

<div id="MoveItHere"></div>

and I set the move right after the dialog is created as:

$('.divDialog').dialog({modal: true, show: 'slide', title: 'Please Enter Information Below', width: 200, 
create: function( event, ui ) 
 {
    // this is the trick, I move it again inside the form, on a specific place.
    $("#MoveItHere").html($(this).parent());
 }
});

And here is the online test, that is working if you see the dom: http://jsfiddle.net/Qej8S/2/