Close all open dialog boxes? (JQuery)

Question

How can I close all opened dialog boxes in jQuery? The situation is next: I have a simple page without dialogs. It has some buttons what open it owns dialogs.

When I click on a button I need to close all opened dialogs.

Here is the HTML:

<div id="buttons">
    <a href="#" id="btn_1">Button 1</a>
    <a href="#" id="btn_2">Button 2</a>
    <a href="#" id="btn_3">Button 3</a>
</div>
<div id="dialog_1" class="dialogbox">...</div>
<div id="dialog_2" class="dialogbox">...</div>
<div id="dialog_3" class="dialogbox">...</div>

And here is the jQuery:

$(function() {
    $('#buttons').find('a').click(function() {
        // close all dialogs
        $('.dialogbox').dialog("close");

        // find out clicked id and open dialog
        var nr = this.id.split("_")[1];
        $('#dialog_'+nr).dialog();
    });
});

The Chrome say: Uncaught Error: cannot call methods on dialog prior initialization; attempted to call method 'close'.

I was tried to check $('.dialogbox').dialog('isOpen'), but same result.

How can I close all dialogs?

Solution 1

Since they all inherit the same class, this is the best way to select all and close by:

$(".ui-dialog-content").dialog("close");

Solution 2

You can simple try this as they all have the .ui-dialog-content class, so select by that and close them, like this:-

 $(".ui-dialog-content").dialog("close");

Comments

[Dan Nissenbaum]

Careful! For dialogs in the HTML that have not yet been initialized, this can result in an error. A working solution is here: stackoverflow.com/a/9060927/368896