Dialog make elements to lose scope in HTML

[Freak_JS]

It's the reduced test case:

• tested in jQuery 1.7.1;
• tested in jQuery UI 1.8.16;
• tested in jQuery UI 1.8.17;

<form name="form1" action="" method="POST">

<div class="box1" title="lose_HTML_form_scope">

<input type="text" name="text1" />

</div>

</form> <script type="text/javascript">

$(".box1").dialog();

</script>

Dialog boxes makes elements lose scope. In this case, I've tried to make dynamic boxes in a form element with inputs. When tried to submit... TADAAANNNNN, the element can't be found. Probably because dialogs are processed and then appended in body. That's bad, and certainly makes forms lose their power. Use "inspect element" on chrome to get it rapidly.

[Scott González]

Duplicate of #4980.

[Freak_JS]

Nope, that's not the case! It's intentionally that I put form elements into dialogs... Destroy can't fix my problem... =\

[Freak_JS]

Which criteria were used to denote duplication??? That's nonsense... =\

[Scott González]

Then you need to provide a more informative use case. If you're submitting the form while the dialog is open, we're not going to support that.

[frediani.adrien]

This is definitely a bug, and not a duplicate of #4980. This problem only happens with custom scoped themes. Use case is pretty simple and not releated to the form submission provided in first sample or destroy method:

<div class="my_custom_scope">

<div id="myDialogID">My dialog content</div>

</div>

$('myDialogID').dialog();

Here, the popup will not be styled because Dialog node content will be moved from whithin the <div class="my_custom_scope">to end of body element.

As a temporary workaround you can use the following trick to force dialog to be wrapped by our custom scoped div:

<div id="myDialogID">My dialog content</div>

$('myDialogID').dialog().wrap('<div class="my_custom_scope">');

As I can't re-open this closed ticket I'll create a new one.