Set jQuery UI dialog button id?

Question

Is it possible to set the ID for the buttons in a jQuery UI dialog, so that I can refer to them later through jQuery? For example, trigger events, disable etc?

Answer 1

Or you can do it as an array:

$("#myDialog").dialog({
   buttons :  [{ 
     text: "OK",
     id: "ok",
     click: function(){
         alert("clicked");
     }   
   }]
});

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

Answer 2

Not through the way you want as the API doesn't provide those options however if you look at the markup generated by the dialog box you should be able to grab whichever elements you need and bind them as you want or add ids to them. Here is the markup as found of the documentation page (http://jqueryui.com/demos/dialog/)

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

If it's buttons inside the content of the modal then you can do CSS queries in the modal element context and get access to them that way.

Answer 3

$("#myDialog").dialog({
  buttons :  { 
     "MyButton" : {
         text: "OK",
         id: "okbtnid",
         click: function(){
             var bValid = true;
         }   
      } 
   }
});