#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: |
Description
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.
Change History (6)
comment:1 Changed 11 years ago by
| Resolution: | → duplicate |
|---|---|
| Status: | new → closed |
comment:2 Changed 11 years ago by
comment:3 Changed 11 years ago by
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 11 years ago by
Which criteria were used to denote duplication??? That's nonsense... =\
comment:5 Changed 11 years ago by
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
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">');
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.
Duplicate of #4980.