#15147 closed bug (notabug)

Opened March 10, 2017 06:48PM UTC

Closed March 10, 2017 07:13PM UTC

Last modified March 11, 2017 12:17PM UTC

Dialog no longer works with detached elements

Reported by:	GSPP	Owned by:
Priority:	minor	Milestone:	none
Component:	ui.dialog	Version:	1.12.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

The following code worked in an earlier version of jQuery and jQuery UI. Using the latest versions as of today the dialog does not show up. This seems to be a regression. No errors are logged.

    var dialogContents = $.parseHTML('<div>x</div>');

    //$('body').append(dialogContents); //uncomment to make this work

    $(dialogContents).dialog({ });

Attachments (0)

Change History (3)

Changed March 10, 2017 07:00PM UTC by rjollos comment:1

description:	The following code worked in an earlier version of jQuery and jQuery UI. Using the latest versions as of today the dialog does not show up. This seems to be a regression. No errors are logged. \ \ var dialogContents = $.parseHTML('<div>x</div>'); \ \ //$('body').append(dialogContents); //uncomment to make this work \ \ $(dialogContents).dialog({ }); \ → The following code worked in an earlier version of jQuery and jQuery UI. Using the latest versions as of today the dialog does not show up. This seems to be a regression. No errors are logged. \ \ {{{#!js \ var dialogContents = $.parseHTML('<div>x</div>'); \ \ //$('body').append(dialogContents); //uncomment to make this work \ \ $(dialogContents).dialog({ }); \ }}} \

description:

The following code worked in an earlier version of jQuery and jQuery UI. Using the latest versions as of today the dialog does not show up. This seems to be a regression. No errors are logged. \ \ var dialogContents = $.parseHTML('<div>x</div>'); \ \ //$('body').append(dialogContents); //uncomment to make this work \ \ $(dialogContents).dialog({ }); \ → The following code worked in an earlier version of jQuery and jQuery UI. Using the latest versions as of today the dialog does not show up. This seems to be a regression. No errors are logged. \ \ {{{#!js \ var dialogContents = $.parseHTML('<div>x</div>'); \ \ //$('body').append(dialogContents); //uncomment to make this work \ \ $(dialogContents).dialog({ }); \ }}} \

Changed March 10, 2017 07:13PM UTC by scottgonzalez comment:2

resolution:	→ notabug
status:	new → closed

This is not a bug or regression in jQuery UI, it is a behavior change in jQuery core. As of jQuery 3.0.0, $.parseHTML() will create the elements in the context of a new document. jQuery UI is document-aware and will only interact with the document that the original element came from. Since that document isn't visible, the generated dialog isn't visible.

To fix this, simply pass the document as the context for $.parseHTML():

var dialogContents = $.parseHTML('<div>x</div>', document);
$(dialogContents).dialog({ });

Changed March 11, 2017 12:17PM UTC by GSPP comment:3

Thanks! That explains why I saw "body" in the parents() of that element! It's just a different body. Sorry for submitting a non-bug. I could not find this issue explained elsewhere on the web.

My actual fix was:

var dialogContents = $('<div>x</div>');
dialogContents.dialog({ });

Because the HTML that I use is suitable for the $ function (it starts with '<' and is a constant). Hope this helps others who find this.