Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#7970 closed bug (duplicate)

Dialog make elements to lose scope in HTML

Reported by: Freak_JS Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.dialog Version: 1.8.17
Keywords: Cc:
Blocked by: Blocking:


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" />


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



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.

Change History (6)

comment:1 Changed 10 years ago by Scott González

Resolution: duplicate
Status: newclosed

comment:2 Changed 10 years ago by Scott González

Duplicate of #4980.

comment:3 Changed 10 years ago by Freak_JS

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

comment:4 Changed 10 years ago by Freak_JS

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

comment:5 Changed 10 years ago by 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.

comment:6 Changed 10 years ago by 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>



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">');

Another solution would be to apply scope to <body> element witch is not acceptable in my opinion as you're loosing benefit of scoping.( Can't apply multiple themes on same page)

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

Last edited 10 years ago by frediani.adrien (previous) (diff)
Note: See TracTickets for help on using tickets.