jQuery Dialog - Modification on an Array of Buttons

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.

Mark Schultheiss · Accepted Answer · 2013-01-24 23:31:20Z

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();

NOTE: this is very verbose, but illustrates the point. I will leave the refactor to make it shorter to the OP

Collectives™ on Stack Overflow

jQuery Dialog - Modification on an Array of Buttons

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related