Override method, where does the jQuery-UI dialog put things in markup?

Question

I am trying to get a simple jQuery interface dialog to work in an ASP.Net project. I have several buttons inside the dialog box <div>, but they did not send back. Upon closer inspection, for some reason, when creating a panel, <div>it moves it to the DOM, so this is the last tag before </body>. All of this will be fine and dandy, except that it also moves it outside the bounds of the tag <form>, which is necessary so that the buttons can postback.

What is the purpose of this behavior and how to redefine it?

Example here: http://jsbin.com/olumu4/

Looking at Firebug, I understand: alt text http://img80.imageshack.us/img80/9049/dialog.png

Answer 1

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

After you assigned your modal style

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

do it

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

If you have several modal files on the page, I find that it does not work as expected, so in this case, when you call the open method in modal mode, do the following:

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

If you want it to open automatically. You can add it immediately after assigning a model.

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

Hope this helps,

Marco

Answer 2

I had this problem before, the option is to configure the even in $ (form) .submit, which adds what is in the dialog box to the form.