Adding a class to some javascript buttons

Question

I'm trying to make some edits to a form written in javascript, however I'm really just getting acquainted with this language. I'm trying to format a couple of buttons; to do this, I would like to add a class to them. The buttons in question are "Add" and "Cancel" and they are rendered with the following function:

    showAddDialog: function() {
        $("#dialog").data("product",upsmart.products.pcounter);
        $("#dialog").html(upsmart.products.createForm(upsmart.products.pcounter));
        $("#photo_button").click(open_media_library);
        upsmart.products.pcounter++;
        $("#dialog").dialog({
            width: 600,
            modal: true,
            buttons: {
                "Add": upsmart.products.addProduct,
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        });
    },

How might I accomplish this?

Thanks for any help.

score 3 · Answer 1 · edited May 23 '17 at 11:57

3

Try this:

$("#dialog").dialog({
            width: 600,
            modal: true,
            buttons: [
        {
            text: "Cancel",
            "class": 'cancelButtonClass',
            click: function() {
                // Cancel code here
            }
        },
        {
            text: "Save",
            "class": 'saveButtonClass',
            click: function() {
                // Save code here
            }
        }
    ],
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

Source:Apply CSS to jQuery Dialog Buttons

edited May 23 '17 at 11:57

Community

1
1

answered Aug 29 '13 at 18:48

ram

31
1

thanks for the reply. Worked when I tried it for just "cancel" but not when I added "add" Here's what I've got: $("#dialog").dialog({ width: 600, modal: true, buttons: [ { text: "Cancel", "class": 'cancelButtonClass', click: function() { $(this).dialog("close"); } }, { text: "Add" "class": 'addButtonClass', click: function(){ upsmart.products.addProduct, } } ], close: function(); { $(this).dialog("close"); } }); – neanderslob Aug 29 '13 at 19:23
Actually here, the code I pasted in my previous comment is atrocious to read. Here's a txt so you don't have to strain your eyes: https://dl.dropboxusercontent.com/u/11993667/add.txt – neanderslob Aug 29 '13 at 19:31

Moazzam Khan · Answer 2 · 2013-08-29T18:53:38.870

0

you can add class to any element using jQuery -

$(element).addClass("class-name")

if button id is abc you can use -

$("#abc").addClass("class-name")

More about add classes using jQuery

And in your specific case of jQuery dialog use -

   $("#dialog").dialog({
        width: 600,
        modal: true,
        dialogClass
       buttons: [
    {
        text: "Add",
        "class": 'addButtonClass',
        click: function() {
            // Cancel code here
        }
    },
    {
        text: "Cancel",
        "class": 'CancelButtonClass',
        click: function() {
            // Save code here
        }
    }
]
        }
    });

edited Aug 29 '13 at 18:53

answered Aug 29 '13 at 18:46

Moazzam Khan

3,130
2
20
35

Thanks for the answer! I'd read this online but am unsure as to how to implement it for the buttons "Add" and "Cancel." Could you give me a hint as to how I'd make use of it in this specific situation? – neanderslob Aug 29 '13 at 18:52
Thanks for the update and explanation, I tried your suggestion and it wouldn't run. I'm assuming the code above for my specific case should work if copied verbatim into $("#dialog").dialog({ – neanderslob Aug 29 '13 at 19:28

Adding a class to some javascript buttons

2 Answers2