Controlling the DOM location of a jquery UI dialog

Question

I'm trying to create a jQueryUI Dialog and have it insert itself into the dom within a specific element. We have a content section that is the parent of a number of styles so items within the dialog are not styled since jqueryUI does an append to body. Is there a way to tell jqueryUI to append to a selector of my choosing?

What it does

<section id="content">
</section>
<div class="dialog"> the dialog </div>

what I want

<section id="content">
<div class="dialog"> the dialog </div>
</section>

Bobolink

$(".selector").dialog({ appendTo: "#someElem" }); is what you are looking for...see my answer below. – Newberry

Answer 1

I know this question is a little old but I wanted to make sure any new comers were pointed in the right direction. The option "appendTo" was added in version 1.10.0.

$( ".selector" ).dialog({ appendTo: "#someElem" });

You can read about it here

Newberry

Very neat solution you saved me a lot of possble code refactoring. – Crossbill

Answer 2

From Custom CSS scope and jQuery UI dialog themes

// Create the dialog, but don't open it yet
var d = $('#myDialogContents').dialog({
    autoOpen: false
    // other dialog options
});
// Take whole dialog and put it back into the custom scope
d.parent('.ui-dialog').appendTo('.myCustomScope');
// Open the dialog (if you want autoOpen)
d.dialog('open');

Bobolink

Note that if the .myCustomScope has overflow: set to auto, hidden, or scroll, the dialog box will be affected since it's a child of that element. – Unseen

Going to accept the more recent answer as it's now a better solution – Bobolink

Answer 3

This link maybe of some use.
But the thing you'd like to achieve seems to me a bit against the model of jQuery UI library. You can style the dialog using the CSS classes specified in the Theme tab on this page.
If you can transfer the id of the element, you want to make into a dialog, to a class, you can use the following code

$( ".dialog" ).dialog({ dialogClass: 'content' });

and you should update your CSS to reflect the change. Thus you do not introduce duplicate id-s (which may lead to problems in future work and is semantically incorrect), if you duplicate the #content tag inside the dialog content

Wisent

it's not the dialog I want to style, it's the form fields, sections, labels, fieldsets etc within the dialog that I want to style and right now they are set like so #content fieldset label {styles} but since jqueryUI appends the dom element it creates to body it's no longer "under" #content and the styles don't cascade properly – Bobolink

Yes, that's what I meant, you can change #content to .ui-dialog-content and this will work. If there are fieldsets in #content, which should be styled the same way as these shown in the dialog, you can always do something like #content fieldset label, .ui-dialog-content fieldset label {styles} – Wisent

all in all there are about 30 or 40 styles that cascade from #content and I'd rather not have to repeat everything to also nest under .ui-dialog-content like this ",.ui-dialog-content form fieldset section input" etc – Bobolink

in regards to my question though, is it possible to have jquery append to a specific dom element other than body – Bobolink

yes, that's nasty. The only optimization I can think of is if you can omit the #content part of the expression - this may help. – Wisent

An excerpt from the source code of jQueryUI dialog: uiDialog = (self.uiDialog = $('<div></div>')).appendTo(document.body) – Wisent

i'll leave this open for now. My quick hack is to duplicate the #content id inside the dialog content. Nothing we do uses #content as a selector so it shouldn't really hurt anything – Bobolink

If you convert id to class you can use this: $( ".dialog" ).dialog({ dialogClass: 'content' }); The replacement in your text editor in the css from id to class should be trivial – Wisent

#2200388 this pretty much gives me the functionality i needed – Bobolink

nice and simple workaround in case of a single dialog on the page. Voted it up :) – Wisent

Answer 4

You can use jquery's append method.

$('#content').append('<div class="dialog"> the dialog </div>');

Thoria

I don't think you understand what's going on here. when you call $('#mydialog').dialog() jquery clones your content to build a new div then appends that to 'body' thus breaking the cascade – Bobolink

If that's what you want, you could store a reference to the previous parent of the dialog when you create the dialog, and move the dialog back on close. – Thoria

it's not about when the dialog closes, it's the fact that it's got the wrong parent when it opens. – Bobolink