jQuery UI dialog - check if exists by instance method

Jquery Ui-Dialog

Jquery Ui-Dialog Problem Overview


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.

Jquery Ui-Dialog Solutions


Solution 1 - Jquery Ui-Dialog

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

Solution 2 - Jquery Ui-Dialog

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.

Solution 3 - Jquery Ui-Dialog

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>

Solution 4 - Jquery Ui-Dialog

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
}

Solution 5 - Jquery Ui-Dialog

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

Solution 6 - Jquery Ui-Dialog

For jQuery UI - v1.10.3

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

Solution 7 - Jquery Ui-Dialog

another way is

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

Solution 8 - Jquery Ui-Dialog

$("[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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiondmncView Question on Stackoverflow
Solution 1 - Jquery Ui-DialogjbabeyView Answer on Stackoverflow
Solution 2 - Jquery Ui-DialogDarwin Santos ArismendyView Answer on Stackoverflow
Solution 3 - Jquery Ui-DialogFrankView Answer on Stackoverflow
Solution 4 - Jquery Ui-DialogxaviqvView Answer on Stackoverflow
Solution 5 - Jquery Ui-DialogMahesh ReddyView Answer on Stackoverflow
Solution 6 - Jquery Ui-DialogAwanView Answer on Stackoverflow
Solution 7 - Jquery Ui-DialogdmncView Answer on Stackoverflow
Solution 8 - Jquery Ui-DialogNikita Jurievich NickemailView Answer on Stackoverflow