Way to override where jQuery-UI dialog places things in markup?
I am trying to get a 开发者_JAVA技巧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: alt text http://img80.imageshack.us/img80/9049/dialog.png
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
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.
精彩评论