Response title
This is preview!
Move this topic
Dialog will move its div-tag to body
Working on it
- Need more info
- Not a problem
- Temporary fix
- Analyzing
- Working on it
- Solved
in Developing jQuery UI
•
13 years ago
Hello,
If a dialog is opened and destroyed the div used as dialogcontent will be removed from its original position and will be appended to the body. This becomes a problem when using partial page updates, because the div will move out of the scope of the update. If the update creates the div again it will exist twice now, including all the problems like not unique IDs.
I have got two ideas to fix this.
Alternative 1: Memorize the parent element
Add following line to the _create function
Alternative 2: Set the target element as option
A new option could look like
<edit>
For a dialog, that is not autoopening an additional code modification is needed
In _create function:
Tested with JQuery UI Version 1.8.1
Greetings,
MaKraus
If a dialog is opened and destroyed the div used as dialogcontent will be removed from its original position and will be appended to the body. This becomes a problem when using partial page updates, because the div will move out of the scope of the update. If the update creates the div again it will exist twice now, including all the problems like not unique IDs.
I have got two ideas to fix this.
Alternative 1: Memorize the parent element
Add following line to the _create function
- this.parentElement = this.element.context.parentNode;
- uiDialog.appendTo(this.parentElement);
- .hide().appendTo(this.parentElement);
Alternative 2: Set the target element as option
A new option could look like
- parentElement: 'body'
- uiDialog.appendTo(self.options.parentElement);
- .hide().appendTo(self.options.parentElement);
<edit>
For a dialog, that is not autoopening an additional code modification is needed
In _create function:
- uiDialog = (self.uiDialog = $('<div></div>'))
- .appendTo(this.parentElement)
Tested with JQuery UI Version 1.8.1
Greetings,
MaKraus
2
Replies(15)
Re: Dialog will move its div-tag to body
12 years ago
While your suggestions make sense, the actual problem here is the appendTo("body"), which actually causes more problems then it solves. We should get rid of that workaround and document how to fix the z-index problem in IE when it actually occurs, via .dialog().dialog("widget").appendTo("body")
Leave a comment on joern.zaefferer's reply
Leave a comment on joern.zaefferer's reply
Re: Dialog will move its div-tag to body
12 years ago
I guess you are aware of what happens when the dialog div is inside a relative positioned div...
I followed a workaround that suggests to moving the dialog div inside a new parent, either before or after it has been opened. Unfortunately I reached a dead end since the parent I was after existed inside a ui tab, which existed in another div and so on... and those other parents have different css position values. This is a problem. Actually the css properties inherited from parents, can cause quite a few problems to the dialog functionality and appearance. For example, after applying the workaround to my dialogs they disappeared.. Now you only can see the overlay. And I know I could probably tweak the css to fix it, but on the other hand having to take in consideration the dialogs when laying out a page is by no means acceptable.
Maybe a nice clean up after a dialog is destroyed is a viable solution, or perhaps a singleton type dialog that has it's content replaced, updated etc.
Btw all tests done with latest firefox
Leave a comment on minos.z's reply
Re: Dialog will move its div-tag to body
12 years ago
For pages that use partial dom updates the following is the only workaround I found and not feeling very bad to apply.. http://forum.jquery.com/topic/jquery-ui-dialog-deleting-items#14737000000947782
This method creates a Dialog from a clone of your original div, and then removes it from dom when closed.
A short version is this
- function showDialog(contentsContainerId){
- $(contentsContainerId).clone().dialog({
- autoOpen: true,
- close: function(ev, ui) { $(this).dialog("destroy").remove(); }
- });
- }
This workaround has one major drawback, and it's all due to clone(). The problem is when the dialog content has one or more elements with an id attribute. For as long as your dialog is open your dom has pairs of elements with the same id...
Re: Re: Dialog will move its div-tag to body
12 years ago
Until we have an appendTo option, there is a fairly simple solution that doesn't involve cloning elements or moving dialogs around in the DOM while they're open. When you create the dialog, just store a reference to the previous sibling, or the parent if there is no previous sibling, and move the dialog back on close.
Leave a comment on minos.z's reply
Re: Dialog will move its div-tag to body
12 years ago
I m afraid things are not that simple. You cannot just move the dialog to another place. The div you specify to become a dialog gets wrapped inside 2 other divs, and a sibling div is also created (the overlay) that you can only get to with prev(). So when you move the dialog there are left overs still appended to the body. Furthermore, if you do remove all these left overs by hand, then the dialog functionality is completely crashed. That's probably because the dialog plugin keeps references to previously opened dialogs, to reuse later (correct me if I'm wrong here please). Only if you call destroy or remove on the dialog itself do the left overs disappear. And once you do that... there 's nothing left to move back to it's previous parent....dead end.
To succesfully solve this thing you 'll have to extract the element from it's wrappers and then you 'll have to remove those wrappers plus the overlay div by hand. Yes it's doable but again this is way too much for something that should work out of the box....
Re: Re: Dialog will move its div-tag to body
12 years ago
The outermost wrapper is available via the .dialog( "widget" ) method. You shouldn't have to worry about the overlay, since plugins are automatically destroyed if they get removed from the DOM. So moving the dialog back to the original location and then overwriting that content will cause the dialog to clean up after itself.
Leave a comment on minos.z's reply
Re: Dialog will move its div-tag to body
12 years ago
Thnx for spending so much time on this.
Unfortunately the solution you propose has major issues...
The first time you open the dialog everything works fine. Then when you close it it does gets moved back to its parent.If you look closely however you 'll see that it is the whole wrapper getting moved, not just the div from which the dialog was created. Now surprisingly when you open the dialog for the second time this wrapper is NOT MOVED again to the body tag. It stays under its parent. This is a problem....
The only reason the dialog is shown the second time is because your html is very simple and the absolute positioning works for embedded elements....
Here is your html with a minor modification that exposes the problem though. I just made your container div having a relative position and overflow hidden. This minor change breaks everything (the effect is that only the overlay is shown) and the reason is that in the end the wrapper has stuck inside the container div. It never gets appended to the body anymore!. Try it. You 'll really see what the problem is when you open firebug and actually see the html elements getting moved around.
If the dialog was indeed getting moved correctly under the body (the second time) then everything would work fine. But since it is not, it inherits styles from its parent.....
Re: Re: Dialog will move its div-tag to body
12 years ago
Okay, I was pretty sure that the dialog plugin always moved the dialog to the body on open. It turns out it only moves it if the dialog does not have a sibling after it (because it assumes it's still in the body). So to get my solution to work, you could create a dummy element to position after the dialog when you move it back to the parent. I'll update the jsbin example in a little while to verify this.
Again, we do plan on adding an appendTo option in the future. It's just that doing so causes an equal number of problems and we need to make sure it's flexible enough to solve all the problems we currently have while also being easy to use and consistent across all plugins.
Re: Re: Dialog will move its div-tag to body
12 years ago
Here's the updated example: http://jsbin.com/acoxo3/3
Leave a comment on minos.z's reply
Re: Dialog will move its div-tag to body
12 years ago
Here's a combined solution that works
- showDialog = function(originalDivId){
- var dialogParent = $(originalDivId).parent();
- var dialog = $(originalDivId).dialog({
- close: function(event, ui) {
- //does not work unless you clone!
- var actualOriginalDialogDiv = dialog.dialog("widget").find(originalDivId).clone();
-
- actualOriginalDialogDiv.hide(); //because when opened it became visible
- actualOriginalDialogDiv.appendTo(dialogParent);
- $(this).dialog("destroy").remove();
- }
- });
Leave a comment on minos.z's reply
Re: Dialog will move its div-tag to body
12 years ago
Hi.
I have a slightly different use-case that touches on the problem in this thread..
I put a #container DIV on the page in which i want my customized dialogs to appear.
This div has no explicit position: set, but it does have width: and height: set.
If I .dialog() a div inside #container, it will get created on <body> instead of #container, causing major mishaps with the _position call. Simply put, my dialog never has the correct coordinates, but has the correct size.
Not a single combination of the position: argument in the .dialog() call will fix this, not even {of:'#container',my:'center',at:'center'}.
This is caused by _position seeing a dialog in creation at a position in the document that's a sibling of #container, and below #container in the document flow. _position simply doesn't work correctly then.
However, adding a custom parentNode: option for .dialog() fixes this.
I tweaked the 1.8.9 ui code, _create() of $.widget('ui.dialog'..), to use this parentNode if it's supplied, in the uiDialog.appendTo() call (+- line 5883 in a complete ui download, jquery-ui-.1.8.9.custom.js).
Now my dialogs show up in the correct spot, without any need for post-creation tweaking (which just slows down my cms and can also result in dialogs that jump across the screen a bit or more).
I have a slightly different use-case that touches on the problem in this thread..
I put a #container DIV on the page in which i want my customized dialogs to appear.
This div has no explicit position: set, but it does have width: and height: set.
If I .dialog() a div inside #container, it will get created on <body> instead of #container, causing major mishaps with the _position call. Simply put, my dialog never has the correct coordinates, but has the correct size.
Not a single combination of the position: argument in the .dialog() call will fix this, not even {of:'#container',my:'center',at:'center'}.
This is caused by _position seeing a dialog in creation at a position in the document that's a sibling of #container, and below #container in the document flow. _position simply doesn't work correctly then.
However, adding a custom parentNode: option for .dialog() fixes this.
I tweaked the 1.8.9 ui code, _create() of $.widget('ui.dialog'..), to use this parentNode if it's supplied, in the uiDialog.appendTo() call (+- line 5883 in a complete ui download, jquery-ui-.1.8.9.custom.js).
Now my dialogs show up in the correct spot, without any need for post-creation tweaking (which just slows down my cms and can also result in dialogs that jump across the screen a bit or more).
Leave a comment on tolas777's reply
Re: Dialog will move its div-tag to body
12 years ago
I forgot to put the overlay in the correct spot as well;
$.extend($.ui.dialog.overlay, { .... create:function(dialog)....
Old code:
var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
.appendTo(document.body)
.css({
width: this.width(),
height: this.height()
});
Correct code:
var parentNode = dialog.options.parentNode ? dialog.options.parentNode : document.body;
var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
.appendTo(parentNode)
.css({
width: this.width(),
height: this.height()
});
Next, to allow the dialog plugin to get the correct height of the dialog content and thereby position it correctly when using "center", i had to change code in _size() of $.widget('ui.dialog), {...
old code:
// reset wrapper sizing
// determine the height of all the non-content elements
nonContentHeight = this.uiDialog.css({
height: 'auto''
width: options.width
})
.height();
code that works correctly:
// reset wrapper sizing
// determine the height of all the non-content elements
nonContentHeight = this.uiDialog.css({
height: options.height, //'auto''
width: options.width
})
.height();
$.extend($.ui.dialog.overlay, { .... create:function(dialog)....
Old code:
var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
.appendTo(document.body)
.css({
width: this.width(),
height: this.height()
});
Correct code:
var parentNode = dialog.options.parentNode ? dialog.options.parentNode : document.body;
var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
.appendTo(parentNode)
.css({
width: this.width(),
height: this.height()
});
Next, to allow the dialog plugin to get the correct height of the dialog content and thereby position it correctly when using "center", i had to change code in _size() of $.widget('ui.dialog), {...
old code:
// reset wrapper sizing
// determine the height of all the non-content elements
nonContentHeight = this.uiDialog.css({
height: 'auto''
width: options.width
})
.height();
code that works correctly:
// reset wrapper sizing
// determine the height of all the non-content elements
nonContentHeight = this.uiDialog.css({
height: options.height, //'auto''
width: options.width
})
.height();
Leave a comment on tolas777's reply
Re: Dialog will move its div-tag to body
11 years ago
I've got the problem you describe:
- i get some html content loaded with:
$("formid").load(...)
- some dialogs are created from this content. But i need to use validation plugin and to be able to clean everything later, so i want my dialogs to be part of the form:
.dialog(...).parent().appendTo($("formid"))
Then when i change the content (.load()), i clean the form $("formid").empty()... but dialogs are moved to the body?!
I've found a simple solution which is to remove each dialog before the empty()...
Leave a comment on xlegalles's reply
Re: Dialog will move its div-tag to body
11 years ago
Time went by, the bug is still open and im going to update the application I'm working on.
Any news on this topic? Is still some custom code needed?
I'm late to say thanks, but i want to catch up and say thank you people writing here or doing some work on this topic. You have helped me very much.
Any news on this topic? Is still some custom code needed?
I'm late to say thanks, but i want to catch up and say thank you people writing here or doing some work on this topic. You have helped me very much.
Re: Re: Dialog will move its div-tag to body
11 years ago
Hi, I am very new to jquery, and i am having the same problem with modal form, and it kind of blocking my development work, So is this bug still open or you guys found any solutions, please suggest me something, it will of great help.
This is the explanation of my problem ,
I have div tag in the home page of my website which i am updating with ajax call,and the pages which gets included in the div tag have modal forms, while uploading pages in the div tag i first call empty() function on the div tag, ideally all the forms which are inside the div tag should be removed but since the modal div are shifting to the body those forms are still in the main page and when i do any form submit those parameters are also passed along with the present parameters . so it creating a lot of problem .
Any work around would of great help
This is the explanation of my problem ,
I have div tag in the home page of my website which i am updating with ajax call,and the pages which gets included in the div tag have modal forms, while uploading pages in the div tag i first call empty() function on the div tag, ideally all the forms which are inside the div tag should be removed but since the modal div are shifting to the body those forms are still in the main page and when i do any form submit those parameters are also passed along with the present parameters . so it creating a lot of problem .
Any work around would of great help
Leave a comment on makraus's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to makraus's problem
{"z5633165":[14737000002053713,14737000002050930],"z3970221":[14737000000968173,14737000002742003],"z2656090":[14737000001167376,14737000001170158,14737000001172355,14737000001172391],"z6235867":[14737000002414065],"z8533165":[14737000003045895],"z4272902":[14737000001164981,14737000001165933,14737000001165995,14737000001174251,14737000001174265],"z2600866":[14737000001073001,14737000001073003]}