Search code examples
jquery-ui-dialog

Find only current jQueryUI dialog's contents in dialog open handler


I have an application that can have multiple jQueryUI dialogs open at the same time.

My problem is that I can't figure out how to find only the current dialogs elements in the open handler of the dialog.

I have tried $(this), ui, ui.dialog and a few other things but without result.

$("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
    .dialog({
        closeOnEscape: false,
        open: function (event, ui) {
            /* 
               What can I use to filter the two selectors below
               so that they only affect the current dialogs contents?
            */
            $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
            $('.ui-dialog-buttonpane', ui.dialog | ui).find('button').each(function (id, el) {
                /* This cycles through all buttons on all dialogs */
                debugger;
            });
        },
        buttons: {
            "Button 1": function () { doStuff; },
            "Button 2": function () { doStuff; },
            "Button 3": function () { doStuff; }
        }
    });

Solution

  • The solution for me was to refer to the event targets parent element.

    e.g. event.target.parentElement

    $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
        .dialog({
            closeOnEscape: false,
            open: function (event, ui) {
                /* Hide the close button of the dialog your are loading */
                $(".ui-dialog-titlebar-close", event.target.parentElement).hide();
    
                /* Cycle through only the buttons belonging to the current dialog */
                $('.ui-dialog-buttonpane', event.target.parentElement).find('button').each(function (id, el) {
                    debugger;
                });
            },
            buttons: {
                "Button 1": function () { doStuff; },
                "Button 2": function () { doStuff; },
                "Button 3": function () { doStuff; }
            }
        });