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; }
}
});
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; }
}
});