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

Posted 2023-05-08

【中文标题】动态更改 jQuery UI 对话框按钮文本

【英文标题】：Dynamically Changing jQuery UI dialog box Button Text

【发布时间】：2011-06-03 06:16:22

【问题描述】：

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

【问题讨论】：

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

【参考方案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：我从本网站的另一篇文章中借用了 getDialogBu​​tton()，但不记得链接）。

//-> 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 应该是唯一的）