jQuery modal form dialog postback problems

Question

After creating your dialog simply move the dialog back into your form. Example:

 $("#divSaveAs").dialog({bgiframe:false,
                            autoOpen:false,
                            title:"Save As",
                            modal:true});
    $("#divSaveAs").parent().appendTo($("form:first"));

This worked for me. Postback works find.

Be aware that there is an additional setting in jQuery UI v1.10. There is an appendTo setting that has been added, to address the ASP.NET workaround you're using to re-add the element to the form.

Try:

$("#dialog").dialog({ autoOpen: false, height: 280, width: 440, modal: true, appendTo:"form" });

"AppendTo" option works to me.

$("#dialog").dialog({ ..., appendTo:"form" });

See: http://api.jqueryui.com/dialog/#option-appendTo

Many thanks for the post of csharpdev! The following code did it for my page:

$("#photouploadbox").dialog({
    autoOpen: false,
    modal: true,
    buttons: { "Ok": function() { $(this).dialog("close"); } },
    draggable: false,
    minWidth: 400 });

$("#photouploadbox").parent().appendTo($("form#profilform"));

One cheeky hack I have used is to create a normal .NET button along with textboxes, etc. within a div on the page, using jQuery get the HTML for that div, add it to the dialog, and then remove the HTML within the original div to avoid id duplication.

<div id="someDiv" style="display: none">
    <p>A standard set of .net controls</p>
    <asp:TextBox ID="textBoxl" runat="server" CssClass="required email"></asp:TextBox>
    <input id="button1" type="button" value="Confirm"  onclick="SomeEvent();" />
</div>

And the script:

var html = $("#someDiv").html();
$("#dialog").append(html);
$("#someDiv").remove();
$("#dialog").dialog({
        bgiframe: true,
        height: 300,
        modal: true
});