Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Ui Dialog Buttons, How to add class?

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');
        }
      }
    });
like image 943
gerky Avatar asked Jul 15 '11 03:07

gerky


People also ask

How to add class to jQuery dialog button?

dialogButtons div button:nth-child(1)"). addClass("oneCssClass"); $("div. dialogButtons div button:nth-child(2)"). addClass("anotherCssClass");

How do I add a button to a dialog box?

If you're adding buttons by specifying them in the HTML itself, then use $("#dialog"). find('button') . All this is after you've called . dialog() on your selector, of course.

What is jQuery ui dialog?

The jQuery UI dialog method is used to create a basic dialog window which is positioned into the viewport and protected from page content. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.


5 Answers

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.

like image 147
Imran Khan Avatar answered Sep 16 '22 18:09

Imran Khan


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.

like image 37
Andrew Whitaker Avatar answered Sep 19 '22 18:09

Andrew Whitaker


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'
                }
          }
        });
like image 32
LintonB Avatar answered Sep 16 '22 18:09

LintonB


Use the open event handler:

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

Clean, simple, piece of cake!

like image 33
bpeterson76 Avatar answered Sep 16 '22 18:09

bpeterson76


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'
  }
};
like image 42
Geoffrey Avatar answered Sep 19 '22 18:09

Geoffrey