Opened 12 years ago

Closed 12 years ago

Last modified 11 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 12 years ago by Scott González

Resolution: duplicate
Status: newclosed

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

Duplicate of #4980.

comment:3 Changed 12 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 12 years ago by Freak_JS

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

comment:5 Changed 12 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 11 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">');

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

Version 0, edited 11 years ago by frediani.adrien (next)
Note: See TracTickets for help on using tickets.