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

Answer 4

$(".ui-dialog-buttonpane button:contains('Save') span").text("Please wait...");

Answer 5

Note the correct way to create multiple buttons on the fly:

'buttons', [
    {
        text: "Download",
        click: function () {...}
    },
    {
        text: "Not now",
        click: function () {...}
    }
]

Here is an example using the non-array style: See this jsFiddle for an example.

Answer 6

$("#dialog-test").dialog({
    title: "My dialog",
    buttons:
        [
          {
              text: "Submit",
              click: function() {
                $(".my-custom-button-class > .ui-button-text").text("Please Wait...");
                //You may use $(this) as selector or allso $("#dialog-test")
                $(this).parent().children('.ui-dialog-buttonpane').children().children().html('Please wait..');
                //As you have only one button, it should not matter to specify child element, but you can like this:
                //$($(this).parent().children('.ui-dialog-buttonpane').children().children()[0]).html('Please wait..');

                $("#some-form").submit();
              },
              'class': 'my-custom-button-class'
          }
        ]
});

Answer 7

For my version of jquery ui (1.11.4), this format worked to change the button text:

$('#setActionButton').button('option').text('new text');

However, it did not reset the button with the new text into the dialog! That was frustrating. JaredBroad's answer above is the one that worked for me, first pulling all the buttons out of the dialog, and then looping through to find the button for renaming. Then it changed the text every time.

Answer 8

Use $().text('Please Wait') before you do the AJAX call and then add $().text('Save') as the last operation in the success callback.

Note that for this, you must use a button element, not an input element:

<button>Text here</button>

Answer 9

For those who don't wanna add extra id/class or who don't wanna repeat click callback function:

// initialization
$('#my-dialog').dialog({
    buttons: [
        {
            text: 'Submit',
            click: function () {...}
        }
    ]
});
// You can simply change button text by this way
$('#my-dialog').dialog('option', 'buttons.0.text', 'wait...');

Answer 10

I find that if I use many dialogs with the same buttons then I can define class to each button in each dialog and then change the text on all buttons.

$('#dialog1').dialog({
        buttons:[{
                    class: "btnOK",
                    click: function () {
                        ...
                    }
                },
                {
                    class: "btnClose",
                    click: function () {
                        ...
                    }
                }]
    });

$('#dialog2').dialog({
        buttons:[...]
    });    

$('.btnOK').button('option', 'label', 'Your text here');
$('.btnClose').button('option', 'label', 'Your text here');

Also instead of class you can define id for each button (however id should be unique)

Answer 11

You will have to use beforeSend and complete options accordingly. Check out the docs for more info:

http://api.jquery.com/jQuery.ajax/