jQuery Ui Dialog Buttons, How to add class?

Question

I found this answer on another thread..

How to add multiple buttons in Jquery UI dialog box?

Using this syntax, how do you add class to a particular button?

 $("#mydialog").dialog({
      buttons: {
        'Confirm': function() {
           //do something
           $(this).dialog('close');
        },
        'Cancel': function() {
           $(this).dialog('close');
        }
      }
    });

@rockerest: You just made my day. Laphroiag 10 year single malt is my go to Scotch. — Walter Stabosz
– Walter Stabosz, Commented Nov 18, 2013 at 1:37
@bpeterson76 answered this as concisely as possible. i18n folks know what to do to make the solution work for them. — Joe Johnston
– Joe Johnston, Commented Feb 24, 2021 at 22:09

Community · Accepted Answer · 2017-05-23 11:55:03Z

90

You Can add class to the button's in Dialog...by

$('#mydialog').dialog({
  buttons:{
    "send":{
      text:'Send',
      'class':'save'
    },
    "cancel":{
      text:'Cancel',
      'class':'cancel'
    }
  });

I think this will work for you. and you can find more answers here.

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Jul 15, 2011 at 5:20

Imran Khan

2,3912 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kajo Over a year ago

You should change the word "className" for "class"

streetlight Over a year ago

Although this works, it generates errors in many IDEs (like Netbeans), leading me to choose the above method(finding the buttons and adding the class) instead.

nil Over a year ago

Is the errors indicating that class is reserved? You can wrap the word with quotes to avoid these errors if so.

nacho4d Over a year ago

I think it is the right approach but the class is added first to other jqueryui classes so the css rule would need !important

Erion Over a year ago

I think this should be marked as answer as it's the best solution.

|

osullic · Accepted Answer · 2017-08-16 13:20:57Z

53

It doesn't look like there's a great way to do this via the API, however you could add the classes in an event handler for create:

$("#dialog").dialog({
    buttons: {
        'Confirm': function() {
            //do something
            $(this).dialog('close');
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    },
    create:function () {
        $(this).closest(".ui-dialog")
            .find(".ui-button:first") // the first button
            .addClass("custom");
    }
});

If you wanted the second button, you could use:

$(this).closest(".ui-dialog").find(".ui-button").eq(1).addClass("custom") // The second button

The key is the $(this).closest(".ui-dialog").find(".ui-button"), which will select the buttons in your dialog. After that, you could apply any selector you want (including :contains(...) which might be useful if you want to select a button based on its text instead of its order).

Here's an example: http://jsfiddle.net/jjdtG/

Also note that the CSS selector for the style(s) you want to apply has to be more specific than jQueryUI's built-in selectors in order for the styling to be applied.

edited Aug 16, 2017 at 13:20

osullic

6121 gold badge11 silver badges24 bronze badges

answered Jul 15, 2011 at 3:18

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

5 Comments

rg89 Over a year ago

+1 This works great, but I used the open instead of create because I am opening and closing the same dialog a few times.

Popnoodles Over a year ago

.dialog({dialogClass: "custom", ...}) is how it says to do it in the docs.

Andrew Whitaker Over a year ago

@popnoodles: This is a pretty old answer. That probably is the preferred way to do it nowadays.

jinglesthula Over a year ago

@AndrewWhitaker though still probably preferred if you want to just add the .ui-priority-primary class to one button. It'd be nice if the buttons just supported something like a buttonClass option you could pass in with the definition.

Kreker Over a year ago

I think this need a correction, the first button,eq(0), is the X button used to close the dialog, so index = 1 is the second button.

LintonB · Accepted Answer · 2014-07-17 09:33:45Z

49

Hope it will help !

$("#mydialog").dialog({
          buttons: {
            'Confirm': function() {
               //do something
               $(this).dialog('close');
            },
            "Cancel": {
                    click: function () {
                        $(this).dialog("close");
                    },
                    text: 'Cancel',
                    class: 'custom-class'
                }
          }
        });

answered Jul 17, 2014 at 9:33

LintonB

5404 silver badges9 bronze badges

2 Comments

pymarco Over a year ago

upvoted for showing example of click, text, & class together.

nacho4d Over a year ago

This is helpful. Although I wish jquery would append the class, not inserted it first.

bpeterson76 · Accepted Answer · 2011-07-15 03:46:37Z

8

Use the open event handler:

open: function(event) {
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
 }

Clean, simple, piece of cake!

edited Jul 15, 2011 at 3:46

answered Jul 15, 2011 at 3:23

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

3 Comments

Jay Over a year ago

Don't forget about i18n! This approach won't work if the website supports multiple languages

bpeterson76 Over a year ago

It could respect i18n if you replaced the string of the button with the value for the language. You could also change your selector if need be. i18n wasn't part of the OP's question.....and for most developers, it's largely an edge case.

Michael Scheper Over a year ago

@bpeterson76: Maybe most developers at Oracle, but outside of the US, i18n is a main concern... usually for US users who can't cope with sites that don't use their 'special' date format.

BenG · Accepted Answer · 2019-01-11 08:04:31Z

2

Thanks to LintonB, you can add all of the property attached to a button like style, id, etc...

dialog_options.buttons = {
  'Modify': {
    click: function() {

      $(this).dialog('close');

      if (inputs.phone !== '') {
        inputs.phone.focus();
        inputs.phone[0].value = "";
      }
    },
    class: 'btn btn-labeled btn-warning',
    style: 'margin-right: 30px;',
    id: 'modificationId'
  },
  'Keep': {
    click: function() {
      $(this).dialog('close');

      _this.validatePhone(i);

    },
    class: 'btn btn-labeled btn-warning',
    id: 'conserverId'
  }
};

edited Jan 11, 2019 at 8:04

BenG

15.2k5 gold badges48 silver badges62 bronze badges

answered Jun 11, 2018 at 7:36

Geoffrey

212 bronze badges

Comments

Vapid · Accepted Answer · 2024-09-27 06:31:12Z

0

I couldn't get some of the others' answers to compile, but I instead had to use change my buttons property to be an array:

buttons: [
    {
        text: "Okay",
        class: "my-button-class",
        click: function() {
            //
        }
    },
    {
        text: "Cancel",
        click: function() {
            //
        }
    }
]

answered Sep 27, 2024 at 6:31

Vapid

8368 silver badges30 bronze badges

Collectives™ on Stack Overflow

jQuery Ui Dialog Buttons, How to add class?

6 Answers 6

7 Comments

5 Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

5 Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related