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

User · Answer

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

User · Answer

I looked at the HTML generated by the UI Dialog  It renders buttons pane like this    lt div class  ui-dialog-buttonpane ui-widget-content ui-helper-clearfix  gt        lt button type  button  class  ui-state-default ui-corner-all  gt Delete all items in recycle bin lt  button gt        lt button type  button  class  ui-state-default ui-corner-all different  style  border  1px solid blue   gt Cancel lt  button gt   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In jQueryUI 1 8 9 using className rather than classes works       element   dialog     buttons        send          text  Send         className  save              cancel          text  Cancel         className  cancel

User · Answer

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   lt span class  ui-icon ui-icon-check  gt  lt  span gt       buttons 1   append   lt span class  ui-icon ui-icon-close  gt  lt  span gt       I d be interested in seeing if there was a better way to do it  but this seems pretty efficient

User · Answer

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

User · Answer

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

User · Answer

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

[jquery] jquery dialog save cancel button styling

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-ui-dialog