CODEWITHSUNDEEP
jquerycssdialog
Dean.DePue
Dean.DePue

Reputation: 1013

Style jQuery dialog buttons

I have a function in a JS file that I use to dynamically add buttons to a dialog:

 function addNewDialogButtons(buttons, id) {
var buttonPane = $(id).parent().find('.ui-dialog-buttonset');
$(buttonPane).empty();
$.each(buttons, function (index, props) {
    var newButton = $('<button></button>', {
        id: 'btn' + id + props.id,
        text: props.text
    });
    newButton.button().unbind().on("click", props.click);
    $(buttonPane).append(newButton);
});
}

In a page I do this:

 var buttons;
            var titleText = "Status Details";
            if (id == null) {
                buttons = [{ text: "Cancel", click: function () { CloseDialog("#divDetails") } }, { text: "Save", click: function () { AddStatus() } }];
                addNewDialogButtons(buttons, "#divDetails");
            }
            else {
                buttons = [{ text: "Cancel", click: function () { CloseDialog("#divDetails") } }, { text: "Save Changes", click: function () { UpdateStatus() } }];
                addNewDialogButtons(buttons, "#divDetails");
            }
            $(buttons).css("border", "1px solid blue");

I have a class in the css file:

 .displaybutton {
font-size: x-small;
background-color: whitesmoke;
color: blue;
border: 1px solid blue;
border-radius: 10px;
}

I have tried to add the class in the add function, in the open function of dialog, and in several other ways with little success. It seems the only thing it does is set the text to x-small. The rest of the class is not used, color, border, etc.

Any ideas on how to do this?

Upvotes: 1

Views: 443

Answers (1)

ESP32
ESP32

Reputation: 8713

The problem is that var buttons is not the actual button, but only it's definition in your function. So when you later do $(buttons).css(...) jQuery cannot find an object "buttons". You have these possibilities for improvement:

  • Apply the css style within your function addNewDialogButtons()
  • Outsource the css information into a css file and just add a class to your buttons.
  • Return the button object from your function
    addNewDialogButtons() and use that object for your css instruction.

Upvotes: 1

Related Questions