Show and hide dynamic jQuery UI Dialogs

Question

I know this should be simple, but it doesn't appear to be working the way I hoped it would.

I'm trying to dynamically generate jQuery UI dialogs for element "help."

I want to toggle the visibility of the dialog on close (x button in dialog), and clicking of the help icon. This way, a user should be able to bring up the dialog and get rid of it, as needed, multiple times during a page view.

// On creation of page, run the following to create dialogs for help
// (inside a function called from document.ready())
$("div.tooltip").each(function (index, Element) {
    $(Element).dialog({
        autoOpen: false,
        title: $(Element).attr("title"),
        dialogClass: 'tooltip-dialog'
    });
});
$("a.help").live("click", function (event) {
    var helpDiv = "div#" + $(this).closest("span.help").attr("id");
    var dialogState = $(helpDiv).dialog("isOpen");
    // If open, close. If closed, open.
    dialogState ? $(helpDiv).dialog('close') : $(helpDiv).dialog('open');
});

Edit: Updated code to current version. Still having an issue with value of dialogState and dialog('open')/dialog('close').

I can get a true/false value from $(Element).dialog("isOpen") within the each. When I try to find the element later (using a slightly different selector), I appear to be unable to successfully call $(helpDiv).dialog("isOpen"). This returns [] instead of true/false. Any thoughts as to what I'm doing wrong? I've been at this for about a day and a half at this point...

Elias Zamaria · Answer 1 · 2012-05-15T17:55:46.503

3

Maybe replace the line declaring dialogState with var dialogState = ! $(helpDiv).dialog( "isOpen" );.

Explanation: $(helpDiv).dialog( "option", "hide" ) does not test if the dialog is open. It gets the type of effect that will be used when the dialog is closed. To test if the dialog is open, you should use $(helpDiv).dialog( "isOpen" ). For more details, see http://jqueryui.com/demos/dialog/#options and http://jqueryui.com/demos/dialog/#methods.

edited May 15 '12 at 17:55

answered May 15 '12 at 17:48

Elias Zamaria

96,623
33
114
148

Thank you for the info. I've modified the code, as per your suggestion. The dialog is never displayed though. The method does appear to wire up to the "click" event... The value of dialogState isn't true/false for some reason. It comes up as [] in firebug. Any thoughts? – user1003221 May 15 '12 at 18:05
I see something strange in your code. In your `helpDiv` declaration, it looks like you are searching for a div with the same id attribute as a span somewhere else. The id attribute is supposed to be a unique identifier for elements and having more than one element with the same id can cause Javascript problems. See http://stackoverflow.com/q/7505350/28324 for more info about that. – Elias Zamaria May 16 '12 at 17:30
Another thing: for some reason, it seems like `dialog("isOpen")` returns an array of elements if you call it on something that is not a dialog. This may be happening because `helpDiv` may not be referring to the thing you want it to, because of the problem with the id attribute. – Elias Zamaria May 16 '12 at 17:32

score 1 · Answer 2 · answered May 16 '12 at 13:44

I was able to get it working using the following code:

$("div.tooltip").each(function (index, Element) {
    var helpDivId = '#d' + $(Element).attr('id').substr(1);
    var helpDiv = $(helpDivId).first();
    $(Element).dialog({
        autoOpen: true,
        title: $(Element).attr("title"),
        dialogClass: 'tooltip-dialog'
    });
});
// Show or hide the help tooltip when the user clicks on the balloon
$("a.help").live("click", function (event) {
    var helpDivId = '#d' + $(this).closest('span.help').attr('id').substr(1);
    var helpDiv = $(helpDivId).first();
    var dialogState = helpDiv.dialog('isOpen');

    dialogState ? helpDiv.dialog('close') : helpDiv.dialog('open');
});

I changed the selectors so that they're identical, instead of just selecting the same element. I also broke out the Id, div and state into separate variables.

Show and hide dynamic jQuery UI Dialogs

2 Answers2