动态更改jQuery UI对话框按钮文本

Question

我正在使用jQuery UI对话框进行ajax表单提交。当用户点击保存按钮并返回保存时，我想将我的保存按钮的文本更改为等待。请帮助我。

- Saokat Ali

---

如果我可以为这个问题选择最佳答案，那就是ManojRK在stackoverflow上的这个回答。干得好，Manoj。 - cssyphus

Answer 1

虽然这个问题非常老，但我发现答案非常简单，而且这里没有给出。

• 您可以为按钮设置ID并使用它。
• 所有对话框按钮都是jQuery UI按钮，因此您可以使用$().button()函数来修改按钮。

JavaScript代码如下：

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

- ManojRK

---

请参考这个答案中的内容（https://dev59.com/vWkv5IYBdhLWcg3w1kSr＃10312946），以获得更简单（非数组）的语法。与此答案配合使用效果很好。 - cssyphus

Answer 2

假设你正在使用带有buttons选项的.dialog()，您可以将自定义类分配给提交按钮，然后通过分配给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'
              }
            ]
    });

当您使用submit()提交数据并完成保存时，您可以使用同一调用来将文本设置回您想要的内容。

- Justin R.

Answer 3

如果有帮助的话：完整实现示例（PS：我从本网站上的另一篇文章中借用了getDialogButton（）但是记不得链接了）。

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

- JaredBroad

---

这段代码：btn.find('.ui-button-text').html(sNewButtonName) 拯救了我。但是为了获取按钮，我发现使用选择器获取按钮的id更容易（你可以在设置按钮的数组中设置id：“myButtonID”，然后使用普通选择器$("#myButtonId")..find('.ui-button-text').html("new text")）。 - Gurnard

太完美了。正是我所寻找的。应该内置于jQueryUI对话框中。 - dualmon

Answer 4

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

- CleanBold

Answer 5

请注意正确的方法来动态创建多个按钮：

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

这是一个使用非数组样式的示例： 查看这个 jsFiddle 的例子。

- cssyphus

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

- Aivar Luist

Answer 7

对于我的jQuery UI版本（1.11.4），这个格式可以用来改变按钮文本：

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

然而，它没有将新文本重置为对话框中的按钮！这很令人沮丧。JaredBroad上面的答案是对我有效的，首先将所有按钮从对话框中取出，然后循环查找重命名按钮。然后每次更改文本。

- excyberlabber

Answer 8

在进行 AJAX 调用之前使用 $().text('Please Wait')，然后在成功回调函数中的最后一个操作添加 $().text('Save')。

请注意，为此，您必须使用 button 元素，而不是 input 元素：

<button>Text here</button>

- Aaron Digulla

---

我正在使用jQuery UI Dialog Buttons。因此，想要更改这些按钮的文本。 - Saokat Ali

问题在于jQuery对话框按钮没有ID。 - Serge Wautier

使用jQuery和仔细的选择器来添加一个，或者将按钮包装在一个带有ID的元素中。 - Aaron Digulla

Answer 9

对于那些不想添加额外的ID / Class或不想重复单击回调函数的人：

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

- Yan

Answer 10

你需要相应地使用beforeSend和complete选项。请查看文档获取更多信息：

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

- Sarfraz