How can I get a jquery ui dialog object?

Question

Say I have a dialog open that has no "id" how can I find the dialog and get the dialog object so I can do .dialog('close') on it?

Example

// say if this was my dialog
<div> 
   <input type="button" id="btn" />
</div>

$("#btn").parents("div").dialog('close');

This does not work though so I need to get the actual object.

Solution 1

That's the very reason you should have an id on those divs. Consider the following options:

1. Consider adding the id to the markup. That is easy to do and maintain.

2. Otherwise, when you get the div(s) originally, before performing a .dialog(), give them dynamic id's: el.attr('id', 'dialogBox').

3. If you don't want to give them id's (for some strange reason), you still have them at some point in time in your js code, so save the references to those objects. Later on, refer to the required reference and you can call .dialog('close'). That will also perform caching for you, so you don't need to search the DOM tree again.

4. As a last resort, if you don't want to do the above, then refer to them the same way you did originally (this isn't always a good idea, especially if the DOM changes).

Although just for reference, your example (which employs the last option) works: http://jsfiddle.net/vbcMW/

Solution 2

I believe finding the closest div with class ui-dialog-content should work:

$("#btn").click(function() {
    $(this).parents("div.ui-dialog-content").dialog("close");
});

(.ui-dialog-content is applied to the original div, which is then wrapped in a few other divs)

Here's a working example: http://jsfiddle.net/HPkvZ/

Solution 3

Just find the closest parent of the currently active element that is a dialog:

var dialog = $(document.activeElement).closest("div.ui-dialog-content");

This is useful if you have lots of dialogs all stacked etc. Note that z-index is no longer used by jquery-ui.

Solution 4

Just save the reference that jQuery returns from the .dialog invocation:

var magic = $('<div>').html("Ta-da!").dialog();

You can then use that reference later to open the popup again:

$(magic).dialog('open');

or to delete it entirely (along with its generated .parent wrapper):

$(magic).parent().remove();

You can even have it delete itself when it is closed, by creating it with the close option (or appending it later):

close: function(ev, ui) { $(this).remove(); }

var magic = null;

function createMagic() {
  magic = $('<div>').html("Ta-da!").dialog({
            modal: true,
            title: 'Not from the DOM',
            buttons:[{
                click: function () { $(this).dialog("close"); },
                text: 'Close Me'
              }],
            show: false,
            //close: function(ev, ui) { $(this).remove(); }
        });
  updateMagicStatus();
}

function showMagic() {
  $(magic).dialog('open');
  updateMagicStatus();
}

function killMagic() {
  $(magic).parent().remove();
  updateMagicStatus();
}

function updateMagicStatus() {
  $('#MagicStatus').text(magic);
  $('#MagicPopStatus').text($('div.ui-dialog').length);
}

$(document).ready(updateMagicStatus);

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

<div style='cursor:pointer'>
<a onclick="createMagic();">Make a Magic Modal</a>
<br/><br/>
<a onclick="showMagic();">Show the Magic Modal</a>
<br/><br/>
<a onclick="killMagic();">Kill the Magic Modal</a>
</div>

<br/>
Magic object is currently: <label id="MagicStatus" style='color:red'></label>
<br/>
jQUery UI popup wrappers: <label id="MagicPopStatus" style='color:red'></label>

Solution 5

To find and close all open jQueryUI dialogs:

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

View more solutions

Comments

[chobo2]

I am using option 3 but for this one case I lose the object(well I don't lose it but I don't want to put it in a global variable to store it).

[davin]

@chobo2, I didn't mention the word "global". There are ways to store objects other than globals, for example jQuery's .data() methods, or even better closured local variables.

[chobo2]

I know you did not mention globals. I am saying my case for this one I probably would need to use it(there probably are better ways but I just don't know them). I can look into this .data() not sure what is. Usually I just pass the dialog object around but like I said in this case I could not do it.

[Rob W]

Note: If two dialogs are nested with this, all of them will be closed. Add :first to only close the current dialog: $(this).parents("div.ui-dialog-content:first").dialog("close‌​");

[Andrew Whitaker]

@RobW: Or you could use closest, if I understand the problem correctly.

[Maxrunner]

How do set the resize event for that dialog var?

[Kasapo]

and here I was trying $(this).parents('.ui-dialog').dialog('close'); -- so close!