Search jQuery

jQuery Forum

Multiple UI Dialogs, how to select/disable dialog button.

in Using jQuery UI • 10 years ago

Scenario: I am creating a User/Group permissions manager for a client. Selecting a group opens a modal dialog to edit the group as well as group memberships. There is button that then opens another modal dialog to select a user/group to add. Thus I have two dialog's stacked, both of which have 'Ok' and 'Cancel' buttons. I would like to disable the 'Ok' button unless something is selected.

I can use the following to get all 'Ok' buttons:

var test = $(".ui-dialog-buttonpane button:contains('Ok')");

But then that returns both dialogs (as well as other dialogs I have hidden for other operations). As the buttonpane is not a child of the dialog div, I would have to find the dialog div's parent and then find the proper button (which I haven't been successful at yet). Or iterate through each button's parents until I reach one that has the dialog as a child. Is there a better way to accomplish this?

Workaround: Renaming every button to be unique ('Ok' becomes 'Add Member'), which I can then use the query from above. That is all well and good, but becomes incrementally more difficult managing button names or if it does not make sense to have unique button names (two separate dialogs that have 'Add Member' for example).

Anthony

Replies(4)

atnoslen

Re: Multiple UI Dialogs, how to select/disable dialog button.

10 years ago

Update: After some research I came across the Next Sibling Selector. I can now grab all buttons and enable/disable them individually this way:

var test = $("#dialog ~ .ui-dialog-buttonpane button");

$(test[0]).button("disable");

But this does not work:

var test = $("#dialog ~ .ui-dialog-buttonpane button:contains('Ok')");

Unsure why the contains selector wouldn't work in this scenario, seeing as it works outside of the next sibling selector. It probably has something to do with operator precedence.

I have also tried:

var test = $("#dialog ~ button:contains('Ok')");

with zero hits. This may just be bad syntax though.

Leaving for the day. Will test tomorrow using the Next Adjacent selector, but unsure if the buttonpane will always be the adjacent sibling.

Anthony

atnoslen

Re: Multiple UI Dialogs, how to select/disable dialog button.

10 years ago

Update: After some additional testing, I have been able to accurately select the proper 'Ok' button in multiple dialogs with one command. It is a double query, but it does not appear to be a significant double as it finds the dialog div's sibling, of class .ui-dialog-buttonpane, and then searches it's children for the 'Ok' button. Here is the commands:

```
$("#dialog ~ .ui-dialog-buttonpane")
```

      .children("button:contains('Ok')")

```
      .button("disable");
```

$("#dialog ~ .ui-dialog-buttonpane")

      .children("button:contains('Ok')")

      .button("enable");

These two lines will enable/disable a specific dialog's specified button. Even though there were no replies, I will consider this question answered as this is a usable solution IMO. Hope this helps someone else out there.

Anthony

jael36

Re: Multiple UI Dialogs, how to select/disable dialog button.

10 years ago

Anthony, I wanted to thank you for this code. It has helped me a lot. I have taken it a little further by extending the dialog to include the following:

$.extend($.ui.dialog.prototype, {
   'enablebutton': function(buttonName, dialogId) {
   $('#' + dialogId + ' ~ .ui-dialog-buttonpane')
   .children("button:contains('" + buttonName + "')")
   .button("enable");
   }
});
$.extend($.ui.dialog.prototype, {
   'disablebutton': function(buttonName, dialogId) {
   $('#' + dialogId + ' ~ .ui-dialog-buttonpane')
   .children("button:contains('" + buttonName + "')")
   .button("disable");
   }
});

and they are called like this: