Detect if a jQuery UI dialog box is open

Question

I am using a jQuery UI dialog. If it is open, I want to do one thing. If it is closed, I want to do another.

My question is, how do I detect if a jQuery UI dialog box is open or not?

score 181 · Accepted Answer · edited Dec 29 '17 at 20:17

181

If you read the docs.

$('#mydialog').dialog('isOpen')

This method returns a Boolean (true or false), not a jQuery object.

edited Dec 29 '17 at 20:17

Salman A

262,204
82
430
521

answered Jul 22 '10 at 21:51

Byron Whitlock

52,691
28
123
168

1

Doh! I don't know how i overlooked that. Thank you. – user208662 Jul 22 '10 at 23:11
1

How would you do this test for any and all dialogs? Say you have ten different dialogs with separate inits and options and you want to test if ANY of them are open, not a specific selector? – Kirk Ross Nov 12 '14 at 21:56
Add a class to said dialogs, then change the selector on your isOpen check. – Suipaste Aug 19 '15 at 15:41
1

plus also: ten dialogs? maybe reducing that by re-using an instance or two is a thought worth considering – David Apr 07 '16 at 13:52
Thank you for calling out the explicit compare! – useSticks Mar 15 '17 at 15:03
I read google and stackoverflow, I don't read docs. Thanks for the result. – Nicolas Thery Sep 20 '17 at 15:17
1

Also check if dialogue has even been initialized with `$("#mydialog").hasClass("ui-dialog-content")`. See https://stackoverflow.com/questions/29528706/how-can-i-tell-if-a-jquery-ui-dialog-query-has-been-initialized – Autumn Leonard Nov 29 '17 at 20:03
it returns the object – Michel Oct 15 '18 at 08:02

score 56 · Answer 2 · edited Apr 22 '16 at 19:18

56

Actually, you have to explicitly compare it to true. If the dialog doesn't exist yet, it will not return false (as you would expect), it will return a DOM object.

if ($('#mydialog').dialog('isOpen') === true) {
    // true
} else {
    // false
}

edited Apr 22 '16 at 19:18

Timo Tijhof

10,032
6
34
48

answered Nov 18 '11 at 11:24

marcovtwout

5,230
4
36
45

4

Returns false in the latest JQuery. – hoyhoy Apr 20 '12 at 21:48
1

How would you do this test for any and all dialogs? Say you have ten different dialogs with separate inits and options and you want to test if ANY of them are open, not a specific selector? – Kirk Ross Nov 12 '14 at 21:56
2

Maybe create a function like $(".ui-dialog").each(function(/*check this dialog*/))? – marcovtwout Nov 13 '14 at 08:41

score 22 · Answer 3 · edited Apr 22 '16 at 19:17

22

If you want to check if the dialog's open on a particular element you can do this:

if ($('#elem').closest('.ui-dialog').is(':visible')) { 
  // do something
}

Or if you just want to check if the element itself is visible you can do:

if ($('#elem').is(':visible')) { 
  // do something
}

Or...

if ($('#elem:visible').length) { 
  // do something
}

edited Apr 22 '16 at 19:17

Timo Tijhof

10,032
6
34
48

answered Jul 22 '10 at 21:50

Nick Craver

623,446
136
1,297
1,155

3

I check my div if it not initialized like that: `$dialog.hasClass('ui-dialog-content')` – Sergey Jun 02 '15 at 06:00
Thanks, I couldn't get the above answers using "isOpen" to work for me, but this worked. – Kyle Challis Jan 15 '16 at 19:58

score 3 · Answer 4 · answered Dec 29 '17 at 16:33

Nick Craver's comment is the simplest to avoid the error that occurs if the dialog has not yet been defined:

if ($('#elem').is(':visible')) { 
  // do something
}

You should set visibility in your CSS first though, using simply:

#elem { display: none; }

score 2 · Answer 5 · edited Jun 06 '16 at 22:01

2

jQuery dialog has an isOpen property that can be used to check if a jQuery dialog is open or not.

You can see example at this link: http://www.codegateway.com/2012/02/detect-if-jquery-dialog-box-is-open.html

edited Jun 06 '16 at 22:01

bnieland

6,047
4
40
66

answered Feb 26 '12 at 07:48

Avinash

21
1

Detect if a jQuery UI dialog box is open

5 Answers5

Linked

Related