Targeting Dialog Buttons

[Richard D. Worth]

How about we add a class to each generated dialog button:

ui-dialog-button-{lcase-text-of-the-button-spaces-replaced-with-hyphen}

So if you had

$("#myDiv").dialog({

  buttons: {

    "Ok": function() { ... },

    "Cancel": function() { ... }

  }

});

then you could target those buttons, whether you wanted to hide them, show them, disable them:

$(".ui-dialog-button-ok").hide();

$(".ui-dialog-button-cancel").attr("disabled", "disabled");

Currently you have to do this using the ordinal position and index of the button in the pane. Thoughts?

- Richard

[Scott González]

What other characters would be need to strip?  Curly braces, brackets, etc.  Would a whitelist or blacklist be better?  Probably need to check the spec.

[Scott González]

Alternatively, this already works:

$('.ui-dialog-buttonpane button:contains(Ok)').hide();

On Thu, Aug 6, 2009 at 9:14 AM, Richard D. Worth <rdw...@gmail.com> wrote:

[Richard D. Worth]

2009/8/6 Scott González <scott.g...@gmail.com>

What other characters would be need to strip?  Curly braces, brackets, etc.  Would a whitelist or blacklist be better?  Probably need to check the spec.

I think [a-z][0-9] would be reasonable. Many special characters would need to be escaped in a selector, and I don't think they add enough value.

Also, we'd have to trim after whitelisting to make sure leading and trailing spaces don't cause leading and trailing hyphens. For example:

buttons: {

  "< Prev": fnPrev,

  "Next >": fnNext

}

should yield

.ui-dialog-button-prev

.ui-dialog-button-next

instead of

.ui-dialog-button--prev

.ui-dialog-button-next-

- Richard

[Richard D. Worth]

Nice. Thanks.

- Richard

2009/8/6 Scott González <scott.g...@gmail.com>

[Scott González]

What about internationalized buttons?

$('#dialog').dialog({

    buttons: {

        'schließen': function() {

            $(this).dialog('close');

        }

    }

});

[Jörn Zaefferer]

I tried to bring that up earlier...

The label of the button shouldn't be the key in the first place.

I suggested something like this:

buttons: [
close: {
// or messages.buttons.close for i18n
label: "Schließen",
click: function() { ... }
}
]

The key, here "close", could then be used to generate a class, without
having to filter.

Jörn

[Richard D. Worth]

I recognize we need a full-fledged solution, and this proposal is not it. That would involve ids, getting and setting text of buttons, setting primary and secondary etc. This is just something I thought of that would be really simple, and allow for some level of access using the existing simple API until we work out a more complete API.

- Richard

[Richard D. Worth]

Good point. Maybe a blacklist would be better. The design and use of the metadata plugin suggests that class names can contain most characters without escaping other than " (space) and '

I like your contains tip, and it might be a better workaround than this in the meantime.

- Richard

[Jörn Zaefferer]

Though just because you can put those characters in a class-attribute
doesn't mean that it'll be valid in a class-selector, which is
important to consider for getElementsByClassName etc.

I agree that the :contains workaround is good enough for now.

Jörn