Search and Top Navigation
#5860 closed bug (fixed)
Opened July 26, 2010 01:51AM UTC
Closed November 30, 2012 12:11PM UTC
Dialog: Destroying a dialog during animated close leaves .ui-effects-wrapper in DOM
| Reported by: | bgould | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.10.0 |
| Component: | ui.dialog | Version: | 1.8.2 |
| Keywords: | animation | Cc: | |
| Blocked by: | Blocking: |
Description
If a dialog has the hide option set and the dialog is destroyed while it is being animated, the effects wrapper remains in the DOM.
$( "#dialog" ).dialog({ hide: "clip" }).dialog( "close" ).dialog( "destroy" );
setTimeout(function() {
alert( $( ".ui-effects-wrapper" ).length );
}, 1000);
Attachments (1)
Change History (11)
Changed July 27, 2010 10:37PM UTC by comment:1
| resolution: | → worksforme |
|---|---|
| status: | new → closed |
Changed August 02, 2010 04:24PM UTC by comment:2
| resolution: | worksforme |
|---|---|
| status: | closed → reopened |
Here is a simple reproduction case... Note that this problem only happens when you are using an effect on the "hide" option...
Changed August 02, 2010 04:34PM UTC by comment:3
Replying to [comment:2 swalke16]:
http://jsbin.com/iheka Here is a simple reproduction case... Note that this problem only happens when you are using an effect on the "hide" option...
This is only happening because you're destroying the dialog before the animation completes.
Changed August 02, 2010 04:40PM UTC by comment:4
ahh... cool. Using the close option to pass a callback that does the destroy works a treat! Thanks.
Changed August 02, 2010 05:08PM UTC by comment:5
| component: | effects.core → ui.dialog |
|---|---|
| description: | This is probably an edge case, but I've reproduced it in two browsers using my application, so I thought I'd report it. \ \ I have a jQuery tabs control on a page (see screenshot). I open a jQuery UI dialog with the 'scale' effect, the user saves some data, and then closes it with the 'scale' effect. \ \ At this point, the tabs that formerly were under the dialog box no longer are clickable, but the ones that remained showing are. \ \ I've tracked the issue to a div with the class name '.ui-effects-wrapper'. Using firebug I can see that this div overlaps the tabs. The portion of the tabs that were not overlapped still work, but the ones that are overlapped by this div do not. \ \ My workaround at this point is to define the following style in my stylesheet: \ \ .ui-effects-wrapper { \ display: none; \ } → If a dialog has the hide option set and the dialog is destroyed while it is being animated, the effects wrapper remains in the DOM. \ \ {{{ \ $( "#dialog" ).dialog({ hide: "clip" }).dialog( "close" ).dialog( "destroy" ); \ setTimeout(function() { \ alert( $( ".ui-effects-wrapper" ).length ); \ }, 1000); \ }}} |
| milestone: | TBD → 1.9 |
| summary: | .ui-effects-wrapper seems to be colliding with tabs → Dialog: Destroying a dialog during animated close leaves .ui-effects-wrapper in DOM |
Changed September 07, 2011 12:50PM UTC by comment:6
| keywords: | → animation |
|---|
Changed October 11, 2012 02:47PM UTC by comment:7
| milestone: | 1.9.0 → 1.10.0 |
|---|
Changed October 15, 2012 09:13PM UTC by comment:8
This appears to be fixed in 1.9. Although the alert in the test case ( http://jsbin.com/iheka ) still shows the element, it is removed right after that. Executing $( ".ui-effects-wrapper" ).length in the console returns 0.
Changed October 16, 2012 01:45PM UTC by comment:9
| status: | reopened → open |
|---|
I still see the problem in 1.9.0.
Changed November 30, 2012 12:01PM UTC by comment:10
Still happening in master: http://jsbin.com/orozuj/1/edit
Changed November 30, 2012 12:11PM UTC by comment:11
| resolution: | → fixed |
|---|---|
| status: | open → closed |
Dialog: Ensure all animations finish and clean up themselve when destroying dialog. Fixes #5860 - Dialog: Destroying a dialog during animated close leaves .ui-effects-wrapper in DOM.
Changeset: 13505e5945e5532c3d56424d50ad109c665d205f
I can't reproduce this. Can you please include a reduced test case? The test case doesn't even need to have tabs on the page, it just needs to show that the effects wrapper exists after the animation completes. Showing that $( ".ui-effects-wrapper" ).length returns a value other than 0 after the animation would suffice.