How can I tell if a jquery ui dialog query has been initialized?

Question

I have the following code to detect if a jquery ui dialog is open:

if ($("#dialog-myDialog").dialog("isOpen")) {
      return;
}

which works fine but I found a situation where this code get called prior to the dialog being initialized in the first place and this if statement seems to just blow up in this case.

What is the best way to check if a jquery ui dialog has been initialized so I can properly handle this situation.

Applicative

Answer 1

Test whether the element has the ui-dialog-content class:

if ($("#dialog-myDialog").hasClass("ui-dialog-content") &&
    $("#dialog-myDialog").dialog("isOpen")) {
    return;
}

Forefend

Answer 2

If you use a solution which relies on the presence of a css class added by a component that is out of your control, then you run the risk of this not working if a new version of the component changes the way it manages classes.

A more reliable solution would be to add your own existence indicator at dialog initialization:

$("#popup").attr("_dialogInitialized", "yes").dialog( { ... } )

Then check for your indicator when you need to:

if ($("#popup[_dialogInitialized]").length == 1) {
    // dialog has been previously initialized
} else {
    // dialog has been not yet been initialized
}

Anthozoan

Answer 3

Add a class when initilizing:

$("selector").addClass("initialized").dialog( { ... } );

Then check for the class when needed:

if ($("selector").hasClass("initialized")) { ... }

Firing

Sometimes it is incorrect. dialog() will call resize event handler, and during this call dialog is still not initialized, but class is already present. – Moleskins