jQuery UI dialog - check if exists by instance method

Question

I'd like to use instance method for testing if jQuery UI Dialog widget has been initialized or not. Regarding to API, this is possible, but it doesn't work for me:

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'instance'

demo: http://jsfiddle.net/mDbV7/

UPDATE:

This was a mistake in the documentation, instance method will be available from version 1.11.0, see this issue.

Participle

Answer 1

The latest version of jQuery UI no longer allows you to call UI methods on items that are not initialized yet. I've just been wrapping them in an if statement, like:

if ($("#divToBeDialoged").hasClass('ui-dialog-content')) {
    // do whatever
} else {
    // it is not initialized yet
}

Edit: changed class name, thanks @dmnc

Normandnormandy

so the API documentation is outdated? – Participle

@pavian, or the widget may be bugged. – Rasberry

jqueryui.com/upgrade-guide/1.9/… – Normandnormandy

@jbabey, the instance method is explicitly documented as being a special case. – Rasberry

The behavior was previously undefined and now throws exceptions, I believe it is working as intended, and the documentation for instance is outdated. Related defects: 8796, 6257. In any case, just use the if statement in my answer. – Normandnormandy

Thanks guys, I've reported this as a documentation issue. – Participle

@jbabey, actually I found ui-dialog-content class with my "dialoged" div. – Participle

@pavian is correct, #divToBeDialoged gets the class ui-dialog-content not ui-dialog. – Agenda

Answer 2

It is also a good habit to empty and destroy dialogs once you're done using them. I usually use this code in the close event of each dialog

$("#myDialog").dialog({
    // other options
    close: function(event, ui) {
        $(this).empty().dialog('destroy');
    }
}

That'd be my advice, rather than asking every time if a dialog exists in an instance make sure that each dialog cleans up after itself.

Harald

yeah, it saves from unpredicted bugs. – Efficient

This is a very nice advice, specially if you are reusing a dialog with different themes, thank you! – Lublin

Note that all you need is .dialog('destroy') to be able to toggle the existence. .empty() will remove the content of the modal. – Hamish

Answer 3

You can use:

if($('#id').is(':ui-dialog')) {
}

or

    var obj = $('<div>test</div>').dialog();
    if (obj.is(':ui-dialog')) {
      alert('I\'m a dialog')
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Proboscis

So many solutions and no working example... Here's a fiddle based on OP's fiddle showing it works in $v1.9.1. – Dobrinsky

that's true sorry, I add a snippet. – Proboscis

Answer 4

If you are making that dialog from an existing id in your html code, like this example:

$('#main').dialog({});

Notice that dialog() adds the class ui-dialog in a <div> parent element generated for it to work. At the #main element, the classes added by dialog() are: ui-dialog-content and ui-widget-content (in jquery-ui-1.9.2). So, in this case, following the example from @jbabey, you can check the existing dialog doing:

if ($('#main').hasClass('ui-dialog-content')) {
    // do whatever
}

Unfathomable

Answer 5

     if ($('#update').is(':data(dialog)')) 
     {
              //#update has dialog
     }
     else
     {
              //#update does't have dialog
     }

Cane

Nor me (jQ 1.9.1, ui 1.10.3) – Ry

Answer 6

For jQuery UI - v1.10.3

if($( "#myDialog" ).is(':data(uiDialog)')){//is(':data(dialog)') does not work
    //Dialog exist
}

Selfservice

Answer 7

another way is

$('.element').is(':data(dialog)');

Participle

Answer 8

$("[aria-describedby="IDNAME"]").remove(); - if you want to remove same dialog, which makes as html code DATA

$("[aria-describedby="IDNAME"]") - element of Dialog with additional ID NAME. You can detect data by ($("[aria-describedby="IDNAME"]").lenght > 0) or remove all dialog with this ID for prevent duplicate window.

Santiagosantillan

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Impetuosity