Way to override where jQuery-UI dialog places things in markup?

Question

I am trying to get a simple jQuery UI dialog to work in an ASP.Net project. I have some buttons inside the dialog's <div>, but they weren't posting back. Upon closer inspection, for whatever reason when making the <div> a panel it moves it in the DOM so that it is the last tag before </body>. This would all be fine and dandy except for it also moves it outside of the <form> tag which is needed so that the buttons can do a postback.

What is the purpose of this behavior and how can I override it?

An example is here: http://jsbin.com/olumu4/

Looking at Firebug though I get this:

Answer 1

I have had this problem before, an option is to setup an even on the $(form).submit that appends what is in the dialog to the form.

Answer 2

Hi Earlz,

This is a common problem with jQuery/ASP.NET.

After you assign your modal like this

$(".modal-window").dialog({
    modal: true
});

do this

$(".modal-window").parent().appendTo($("form:first"));

If you have more than one modal on a page, I've found it doesn't work as expected, so in that case when you call the open method on the modal, do this:

$('.modal-window').dialog('open').parent().appendTo($('form:first'));

If you want to have it auto-open. You can append it right after the model is assigned.

$(".modal-window").dialog({
    modal: true
    }).parent().appendTo($('form:first'));

Hope this helps,

Marko