CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
chobo2
chobo2

Reputation: 85765

How can I get a jquery ui dialog object?

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.

Upvotes: 6

Views: 20538

Answers (6)

brichins
brichins

Reputation: 4055

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>

Upvotes: 2

PapillonUK
PapillonUK

Reputation: 652

To find and close all open jQueryUI dialogs:

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

Upvotes: 1

matt burns
matt burns

Reputation: 25370

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.

Upvotes: 5

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

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/

Upvotes: 4

David Wick
David Wick

Reputation: 7095

why not use the buttons option? allowing you to close via $(this).dialog('close');

http://jsfiddle.net/dwick/DqLct/2/

also, is there a reason to not just give the div an id? you have to reference it somehow to create the dialog anyway.

Upvotes: 0

davin
davin

Reputation: 45525

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/

Upvotes: 4

Related Questions