Making jQuery UI’s Dialog Work With ASP.Net

You might have come across this problem in your travels, I know I have. Basically if you’re using jQuery UI’s Dialog and have a <form runat=”server”> inside of that dialog, your postback is not going to work. What’s going on?

jQuery UI is taking the dialog DIV content and moving it outside of the <form runat=”server”> tag. This makes your postback no longer function as expected.

Luckily we can fix this fairly easily with jQuery itself.

var dlg = $('#divMyDialog').dialog({
                    autoOpen: false,
                    modal: true,
                    width: 400,
                    resizable: false,
                    overlay: {
                        background: "black",
                        opacity: 0.5    
                    }
                });
dlg.parent().appendTo(jQuery('form:first'));

The special logic lies in the last line—using the reference to our created dialog, we get the parent container and move it back to the first <form> on the page. After that, all is well.