jQuery UI Dialog buttons

Question

Hi Folks,

when creating a dialog with buttons like:

buttons:    {
            'button text': function(){                              
                // do something
            },

do I have access to the button within the click event handler?

$(this)

is the context/jQuery object of the whole dialog.

I doubt I have to be such creative as

$(this).find('button').attr(...)

to disabled a button there ?

Answer 1

The format of the buttons in the dialog is a <button> with a <span> inside, like this:

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
  <span class="ui-button-text">Button text</span>
</button>

So when you click, the actual click event happens on that <span> or <button>, depending on your styling (margin on the span for example), so to get the <button> just make your handler go up to the button even if you're already on it, like this:

buttons: {
  'button text': function(e){
     $(e.target).closest("button") //this is the button, do something with it :)
  }
}

Here's a quick demo of this working

Answer 2

The documentation for dialog() says:

The property key is the text of the button. The value is the callback function for when the button is clicked. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.

$('#myDialog').dialog({
    'title': 'My Dialog Header',
    'buttons': {
        'My Button': function(event) {
            // here is the modification of the button
            // opacity set to 25%, all events unbound
            $(event.target).css({opacity: 0.25}).unbind();
        }
    }
});