CODEWITHSUNDEEP
jqueryjquery-ui-dialog
Bronzato
Bronzato

Reputation: 9342

Adding a class on the buttons of my jquery dialog

I have a jQuery dialog:

    // Configure buttons
    var dialogButtons = {};

    dialogButtons[buttonConfirm] = function () {
        $.ajax({
            type: "Post",
            url: href,
            cache: false,
            success: function (data) { var func = success; window[func](data); }
        });
        $(this).dialog("close");
    };

    dialogButtons[buttonCancel] = function () {
        $(this).dialog("close");
    };

    // Configure dialog
    $dialog.dialog(
        {
            modal: true,
            closeOnEscape: true,
            resizable: false,
            buttons: dialogButtons
        });

    // Opening dialog
    $dialog.dialog('open');

My question: I would like to set a specific class 'btn' on my buttons. How can I do this?

Thanks

Upvotes: 1

Views: 1070

Answers (3)

Roland Mai
Roland Mai

Reputation: 31077

If you take a look at the source, in the method _createButtons of jquery.ui.dialog.js you'll see that the hash that is indexed by the text of the button is treated as a collection of properties if it is not a function. So you can do the following:

var $dlg = $('#dlg').dialog({
    buttons: {
        'firstButton': {            
            'click': function() {
                $dlg.dialog('close');
            },
            'text' : 'OK',         
            'class': 'myclass'
        },
        'Cancel': function(){
            $dlg.dialog('close');
        }
    }
});

Here's a fork of Brad's fiddle demonstrating the code http://jsfiddle.net/uWnpy/

Upvotes: 1

SpYk3HH
SpYk3HH

Reputation: 22570

// Configure dialog
$dialog.dialog({
    modal: true,
    closeOnEscape: true,
    resizable: false,
    buttons: dialogButtons,
    open: function(e, ui) { 
        $(this).parents(".ui-dialog").find(".ui-dialog-buttonset"); // here is your 
                                                                    // button container
        $(this).parents(".ui-dialog").find(".ui-dialog-buttonset .ui-button").addClass("btn"); // whereas this would select
                                                                                               // all buttons in button container
        // you could even use the widget method
        // $(this).dialog("widget").find(".ui-dialog-buttonset .ui-button")
    }
});

Upvotes: 1

Brad Christie
Brad Christie

Reputation: 101604

@Colin had one answer, but I thought I'd be more specific to the dialog in question. jQuery-UI has a widget method that returns the elements that are comprised of the dialog itself. Coupling this with locating ui-button class, you can get what you're looking for:

$dialog.dialog('widget') // Grab widget (UI element)
  .find('.ui-button')    // Locate buttons within
  .addClass('btn');      // hadd btn class to them

EDIT: Also, here is an example: http://jsfiddle.net/8WckB/

Upvotes: 1

Related Questions