CODEWITHSUNDEEP
javascriptjqueryjquery-ui
kaze
kaze

Reputation: 4359

Set jQuery UI dialog button id?

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?

... in the dialog setup ...
buttons: {               
    "Sök": function () {
        var bValid = true;
    },
    "OK": function () {
        if (OK()) {
            getStuffNoteringar($("#txtStuffId").val());
            $(this).dialog("close");
        }
    }

.... later on in some javascript code....

$('#OK').click();

Upvotes: 23

Views: 22800

Answers (3)

paulslater19
paulslater19

Reputation: 5917

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

Upvotes: 2

mprabhat
mprabhat

Reputation: 20323

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

Upvotes: 50

GillesC
GillesC

Reputation: 10874

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.

Upvotes: 0

Related Questions