Question

I have a function which creates a dialog filled with buttons, whose names come from a button array. See this post here.

What I would like to do is modify this function such that I can apply styles to the button array generated. As such…

function setAutoDialog(){
    var testArray = ["T1", "T2"];

    var testFunction = function () {
        alert("worked");
    }

    var myButtons = {};

    for(var i = 0; i < testArray.length; i++){
        myButtons[testArray[i]] = testFunction;
    }
    for(var i = 0; i < testArray.length; i++){
        myButtons[i].css('background','black');
    }

    $('#autoDialog').dialog({
        autoOpen: false,
        width: 'auto',
        buttons : myButtons
    }); 
}

As some of you might suggest, I just can’t apply a class to the button because the colors will be set by the user, or come from an array of ordered colors to match said button. Any help with this would be much appreciated.

Answer 1

You are going to have to fudge this just a bit.

With this markup:

<div id="autoDialog">howdy</div>

you could create an array of colors and class names and then apply those:

I have altered your procedure just a bit, and added some alerts so you see the class has been added: (this is a jQuery 1.9 version tested for the alert of the class property) – basically I create a dynamic style element and apply it. I add just enough to the style to override the existing style – sure its a hack but should work.
example in practice: http://jsfiddle.net/Q4qT3/1/

function setAutoDialog() {
    var testArray = ["T1", "T2"];
    var myClass = [{
        myclass: "primary",
        color: "#558899"
    }, {
        myclass: "secondary",
        color: "pink"
    }];
    var testFunction = function (e) {
        alert("worked2");
        alert($(e.target).prop("class"));
    };

    var myButtons = [];
    var i = 0;
    for (i = 0; i < testArray.length; i++) {
        myButtons[i] = {
            text: testArray[i],
            click: testFunction,
            myclass: myClass[i].myclass
        };
    }
    var myStyle = "<style type='text/css'> ";
    for (i = 0; i < testArray.length; i++) {
        myStyle += " .ui-dialog-buttonset ." ;
        myStyle += myClass[i].myclass;
        myStyle += " span.ui-button-text {background:";
        myStyle += myClass[i].color + ";}";
    }
    myStyle += "< /style > ";
    $(myStyle).appendTo("head");

    $('#autoDialog').dialog({
        autoOpen: false,
        width: 'auto',
        buttons: myButtons,
        create: function (event, ui) {
            //         Get the dialog
            var dialog = $(event.target).parents(".ui-dialog.ui-widget");
            var buttons = dialog.find(".ui-dialog-buttonpane").find("button");
            for (var i = 0; i < buttons.length; i++) {
                $(buttons[i]).addClass($(buttons[i]).attr("myclass"));
            }
        }
    });
    $('#autoDialog').dialog("open");
}
setAutoDialog();