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?

Answer 1

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

Answer 2

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