JQuery Dialog

Today came across a need to customize this jquery dialog. The aim is disable one of the button by condition.

http://docs.jquery.com/UI/Dialog

It turns out that that is an undocumented way to customize the ids for the buttons like below.

   1: $("#dialog").dialog({

   2:     height: "auto",

   3:     width: "auto",

   4:     buttons: [

   5:         {

   6:             id: "dialog-close",

   7:             text: "Cancel",

   8:             click: function() {

   9:                 // do something

  10:             }

  11:         },

  12:         {

  13:             id: "dialog-ok",

  14:             text: "Ok",

  15:             click: function() {

  16:                 // do something

  17:             }

  18:         }

  19:     ]

  20: });

  21:  

Once id can be set, event handling such as disable button or do other things became straight forward.