jquery dialog save cancel button styling

Question

I am using jquery ui dialogs in my application. How do I style the "Save" and "Cancel" buttons differently in a jquery dialog? So "Save" is more appealing than the "Cancel". I could use a hyper link for "Cancel", but how do I place that in the same button panel?

Leonardoleoncavallo

Are you talking about a typical Javascript dialog box (like, the kind you'd get from calling alert())? Because those can't be styled. Your best bet is to use some type of modal overlay for jQuery (I couldn't recommend one as I've never used any). – Roxy

As mentioned in the post, he is using jQuery UI dialog. – Ptero

Then its simply a matter of looking at the elements that jQuery is adding to the page and styling based on that (or reading through the documentation, which undoubtedly covers this - jqueryui.com/demos/dialog/#theming ) – Roxy

Actually, no, the documentation does not cover this. The buttons added by the framework are generic, so you can't style based on class names unless you add them yourself. – Cohin

Answer 1

Here is how to add custom classes in jQuery UI Dialog (Version 1.8+):

$('#foo').dialog({
    'buttons' : {
        'cancel' : {
            priority: 'secondary', class: 'foo bar baz', click: function() {
                ...
            },
        },
    }
}); 

Stultz

Unfortunately, it looks like they've changed the milestore for this patch to 1.9. – Engaged

class works, classes does not. they just append any attributes you put in that object to the dom. – Shopping

adding class actually breaks the js in IE8 and causes the dialog not to work. If you use this put apostrophes around the word class. So: priority: 'secondary', 'class': 'foo bar baz', ... etc – Helenahelene

Also, it will be a problem in iPad if class is not surrounded by double/single quotes. – Stibnite

Looks like the 1.11 version of the docs is still a bit sparse on this point. api.jqueryui.com/dialog/#option-buttons mentions icons and showText, gives examples of text, icons, and click, but doesn't mention priority or class/className. – Retortion

Answer 2

In jQueryUI 1.8.9 using className rather than classes works.

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

Tradescantia

Answer 3

I'm using jQuery UI 1.8.13 and the following configuration works as I need:

var buttonsConfig = [
    {
        text: "Ok",
        "class": "ok",
        click: function() {
        }
    },
    {
        text: "Annulla",
        "class": "cancel",
        click: function() {
        }
    }
];

$("#foo").dialog({
    buttons: buttonsConfig
// ...

ps: remember to wrap "class" with quotes because it's a reserved word in js!

Footstone

what he said - class: works but not in older IEs where "class": does – Nonalcoholic

Answer 4

It has been a while since this question was posted, but the following code works across all browsers (note although MattPII's answer works in FFox and Chrome, it throws script errors in IE).

$('#foo').dialog({
    autoOpen: true,
    buttons: [
    {
        text: 'OK',
        open: function() { $(this).addClass('b') }, //will append a class called 'b' to the created 'OK' button.
        click: function() { alert('OK Clicked')}
    },
    {
        text: "Cancel",
        click: function() { alert('Cancel Clicked')}
    }
  ]
});

Rollins

Thanks! Works for me in version 1.8.23, but some of the older answers for older versions I couldn't get to work. – Orchardist

Answer 5

As of jquery ui version 1.8.16 below is how I got it working.

$('#element').dialog({
  buttons: { 
      "Save": {  
          text: 'Save', 
          class: 'btn primary', 
          click: function () {
              // do stuff
          }
      }
});

Spokeshave

Just attempted to use this style and it generated a script error in IE 7,8, and 9. – Manganin

I too experienced this issue and have added the solution in the form of an answer. – Rollins

Answer 6

These solutions are all very well if you only have one dialog in the page at any one time, however if you want to style multiple dialogs at once then try:

$("#element").dialog({
    buttons: {
        'Save': function() {},
        'Cancel': function() {}
    }
})
.dialog("widget")
.find(".ui-dialog-buttonpane button")
.eq(0).addClass("btnSave").end()
.eq(1).addClass("btnCancel").end();

Instead of globally selecting buttons, this gets the widget object and finds it's button pane, then individually styles each button. This saves lot's of pain when you have several dialogs on one page

Gutshall

Answer 7

after looking at some other threads I came up with this solution to add icons to the buttons in a confirm dialog, which seems to work well in version 1.8.1 and can be modified to do other styling:

$("#confirmBox").dialog({
    modal:true,
    autoOpen:false,        
    buttons: { 
        "Save": function() { ... },                
        "Cancel": function() { ... }
        }
});

var buttons = $('.ui-dialog-buttonpane').children('button');
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon');

$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
$(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>");

I'd be interested in seeing if there was a better way to do it, but this seems pretty efficient.

Cyrilcyrill

Answer 8

I had to use the following construct in jQuery UI 1.8.22:

var buttons = $('.ui-dialog-buttonset').children('button');
buttons.removeClass().addClass('button');

This removes all formatting and applies the replacement styling as needed.
Works in most major browsers.

Abelabelard

Answer 9

This function will add a class to every button in you dialog box. You can then style (or select with jQuery) as normal:

$('.ui-dialog-buttonpane :button').each(function() { 
    $(this).addClass($(this).text().replace(/\s/g,''));
});

Mllly

Answer 10

I have JQuery UI 1.8.11 version and this is my working code. You can also customize its height and width depending on your requirements.

$("#divMain").dialog({
    modal:true,
    autoOpen: false,
    maxWidth: 500,
    maxHeight: 300,
    width: 500,
    height: 300,
    title: "Customize Dialog",
        buttons: {
            "SAVE": function () {
                //Add your functionalities here
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        },
        close: function () {}
});

Varico

Answer 11

check out jquery ui 1.8.5 it's available here http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js and it has the new button for dialog ui implementation

Arnoldarnoldo

Answer 12

I looked at the HTML generated by the UI Dialog. It renders buttons pane like this:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
     <button type="button" class="ui-state-default ui-corner-all">Delete all items in recycle bin</button>
     <button type="button" class="ui-state-default ui-corner-all different" style="border: 1px solid blue;">Cancel</button>
</div>

Adding a class to Cancel button should be easy.

$('.ui-dialog-buttonpane :last-child').css('background-color', '#ccc');

This will make the Cancel button little grey. You can style this button however you like.

Above code assumes that the Cancel button is the last button. The fool proof way to do it would be

$('.ui-dialog-buttonpane :button')
    .each(
        function()
        { 
            if($(this).text() == 'Cancel')
            {
                //Do your styling with 'this' object.
            }
        }
    );

Ptero