Dynamically Changing jQuery UI dialog box Button Text

Although the question is very old I find the answer to be very simple and it has not been given here.

• You can set an id for the button and use it.
• All the dialog buttons are jQuery UI buttons hence you can use $().button() function to modify the button.

The JavaScript code is:

$('#dialog').dialog({    buttons:[{        id: 'buttonId',        click: function() {            // your function        }]});$('#buttonId').button('option', 'label', 'Please wait...');

Presuming you're using .dialog() with the buttons option, you can assign a custom class to the submit button, and then target the inner button text via the class that is assigned to the span (ui-button-text):

    $("#dialog-test").dialog({        title: "My dialog",        buttons:            [              {                  text: "Submit",                  click: function() {                    $(".my-custom-button-class > .ui-button-text").text("Please Wait...");                     $("#some-form").submit();                  },                  'class': 'my-custom-button-class'              }            ]    });

When your save completes via the submit(), you could use the same call to set the text back to what you want.

If it helps anyone: full implementation with example (PS: I borrowed getDialogButton() from another post on this site but can't remember link).

//-> Change to Loading Notice:setButton('.settingsDialog', 'Save', 'Saving...', false);setTimeout(function() { setButton('.settingsDialog', 'Saving...', 'Save', true); }, 800 );},//Select the Dialog Buttonsfunction getDialogButton( dialog_selector, button_name ) {  var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );  for ( var i = 0; i < buttons.length; ++i ) {     var jButton = $( buttons[i] );     if ( jButton.text() == button_name )     {         return jButton;     }  }  return null;}//Button Controller for AJAX Loading:function setButton(sDialogClass, sButtonName, sNewButtonName, bEnabled){    var btn = getDialogButton(sDialogClass, sButtonName);    btn.find('.ui-button-text').html(sNewButtonName);    if (bEnabled) {        btn.removeAttr('disabled', 'true');        btn.removeClass( 'ui-state-disabled' );    } else {        btn.attr('disabled', 'true');        btn.addClass( 'ui-state-disabled' );    }}