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

【问题标题】：Dynamically Changing jQuery UI dialog box Button Text动态更改 jQuery UI 对话框按钮文本
【发布时间】：2011-06-03 06:16:22
【问题描述】：

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

【问题讨论】：

如果我可以为这个问题选择最佳答案，那就是this one by ManojRK。干得好，马诺杰。

标签： jquery ajax jquery-ui

【解决方案1】：

虽然这个问题很老了，但我发现答案很简单，这里没有给出。

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

JavaScript 代码是：

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

【讨论】：

See also this answer 用于更简单的（非数组）语法。与此答案结合使用效果很好。

【解决方案2】：

假设您将 .dialog() 与按钮选项一起使用，您可以为提交按钮分配一个自定义类，然后通过分配给跨度的类（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() 完成保存时，您可以使用相同的调用将文本设置回您想要的内容。

【讨论】：

【解决方案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' );
    }
}

【讨论】：

这一点：btn.find('.ui-button-text').html(sNewButtonName) 救了我的培根。但是要获取按钮，我发现使用选择器获取按钮的 id 更容易（您可以在设置按钮的数组中设置 id:"myButtonID" 然后使用普通选择器 $("#myButtonId").. find('.ui-button-text').html("新文本")
完美。正是我想要的。应该内置到 jQueryUI 对话框中。

【解决方案4】：

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

【讨论】：

【解决方案5】：

Note the correct way 动态创建多个按钮：

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

这是一个使用非数组样式的示例：以See this jsFiddle 为例。

【讨论】：

【解决方案6】：

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

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

<button>Text here</button>

【讨论】：

我正在使用 jQuery UI 对话框按钮。所以想要更改那些按钮的文本
问题是jQuery对话框按钮没有id
使用 jQuery 添加一个并小心使用选择器或将按钮包装在一个带有 ID 的元素中。

【解决方案7】：

$("#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'
          }
        ]
});

【讨论】：

【解决方案8】：

对于我的 jquery ui (1.11.4) 版本，这种格式可以更改按钮文本：

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

但是，它并没有将带有新文本的按钮重置到对话框中！那令人沮丧。 JaredBroad 上面的答案对我有用，首先将所有按钮拉出对话框，然后循环查找用于重命名的按钮。然后它每次都更改文本。

【讨论】：

【解决方案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...');

【讨论】：

【解决方案10】：

您必须相应地使用beforeSend 和complete 选项。查看文档了解更多信息：

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

【讨论】：

【解决方案11】：

我发现如果我使用许多具有相同按钮的对话框，那么我可以为每个对话框中的每个按钮定义 class，然后更改所有按钮上的文本。

$('#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');

您还可以为每个按钮定义 id 而不是 class（但是 id 应该是唯一的）

【讨论】：