Dynamically Changing jQuery UI dialog box Button Text

Question

I am using jQuery UI Dialog box for ajax form submit. I want change the text of my save button to wait , when user click on it and back to Save when ajax call complete. pls help me

Answer 1

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...');

Answer 2

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.

Answer 3

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 Buttons
function 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' );
    }
}