How to give css class to the OK button of dialog in JQuery?

Question

I am new in Jquery. I have a code for dialog.

$(this.choosePadsContainer).dialog({ 
        title: 'Choose pad locations',
        autoOpen: false,
        modal: true,
        buttons: { "OK": function () {
            //Extract all checked pad locations.
            var checkedPads;
            checkedPads = new Array();
            $(self.padLocationsForActivity + " input:checked").each(function (index, value) {
                checkedPads.push($(value).val());
            });
            //Set selected pad text.
            setSelectedPadText(self.selectedPadsLblIdFormat, $(self.hiddenActivityAreaCode).val(), checkedPads);
            $(this).dialog("close");
        }
        }
    });

I want to give css class to the OK button. How will it be done?

Raphael Schweikert · Answer 1 · 2011-03-28T09:27:00.837

Use the alternate (array) syntax for the buttons property:

$(this.choosePadsContainer).dialog({ 
    title: 'Choose pad locations',
    autoOpen: false,
    modal: true,
    buttons: [
        {
            text: 'OK',
            className: 'myClass',
            click: function () {
                //Extract all checked pad locations.
                var checkedPads;
                checkedPads = new Array();
                $(self.padLocationsForActivity + " input:checked").each(function (index, value) {
                    checkedPads.push($(value).val());
                });
                //Set selected pad text.
                setSelectedPadText(self.selectedPadsLblIdFormat, $(self.hiddenActivityAreaCode).val(), checkedPads);
                $(this).dialog("close");
            }
        }
    ]
});

+1, @Raphael, I didn't know this was possible. And It works too, so thanks. — Starx, Mar 28 '11 at 09:23

score 2 · Answer 2 · edited May 23 '17 at 12:00

As per tvanfosson's answer here, you can use the open handler:

open: function(event) {
    $('.ui-dialog-buttonpane').find('button:contains("OK")').addClass('okButton');
}

E.G.

$(this.choosePadsContainer).dialog({ 
    title: 'Choose pad locations',
    autoOpen: false,
    modal: true,
    open: function(event) {
        $('.ui-dialog-buttonpane').find('button:contains("OK")').addClass('okButton');
    },
    buttons: { "OK": function () {
        //Extract all checked pad locations.
        var checkedPads;
        checkedPads = new Array();
        $(self.padLocationsForActivity + " input:checked").each(function (index, value) {
            checkedPads.push($(value).val());
        });
        //Set selected pad text.
        setSelectedPadText(self.selectedPadsLblIdFormat, $(self.hiddenActivityAreaCode).val(), checkedPads);
        $(this).dialog("close");
    }
    }
});

Starx · Answer 3 · 2011-03-28T09:24:42.367

0

I think you can do something like this.

$(window).load(function() {
    $("span[class=ui-button-text]:contains('OK')").each(function() {
          $(this).addClass("myClass");
    });
});

edited Mar 28 '11 at 09:24

answered Mar 28 '11 at 09:06

Starx

77,474
47
185
261

score 0 · Accepted Answer · answered Mar 28 '11 at 09:07

0

AFAIK it's not directly supported, but something this should work:

$(".ui-dialog-buttonset .ui-button", this.choosePadsContainer).addClass("foo");

answered Mar 28 '11 at 09:07

Jo-Herman Haugholt

462
1
5
15

How to give css class to the OK button of dialog in JQuery?

4 Answers4

Linked