Search and Top Navigation
#7970 closed bug (duplicate)
Opened December 21, 2011 06:52PM UTC
Closed December 21, 2011 07:04PM UTC
Last modified May 30, 2012 10:48AM UTC
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.
Attachments (0)
Change History (6)
Changed December 21, 2011 07:04PM UTC by comment:1
| resolution: | → duplicate |
|---|---|
| status: | new → closed |
Changed December 21, 2011 07:34PM UTC by comment:3
Nope, that's not the case! It's intentionally that I put form elements into dialogs... Destroy can't fix my problem... =\\
Changed December 21, 2011 07:37PM UTC by comment:4
Which criteria were used to denote duplication??? That's nonsense... =\\
Changed December 21, 2011 07:47PM UTC by comment:5
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.
Changed May 30, 2012 10:48AM UTC by comment:6
| _comment0: | 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. \ → 1338375032178791 |
|---|
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.