Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#15147 closed bug (notabug)

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 (last modified by Ryan J Ollos)

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({ });

Change History (3)

comment:1 Changed 5 years ago by Ryan J Ollos

Description: modified (diff)

comment:2 Changed 5 years ago by Scott González

Resolution: notabug
Status: newclosed

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({ });

comment:3 Changed 5 years ago by GSPP

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.

Note: See TracTickets for help on using tickets.