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

Dynamically Changing jQuery UI dialog box Button Text

提问by Saokat Ali

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

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

回答by ManojRK

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.

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

The JavaScript code is:

JavaScript 代码是：

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

回答by Justin R.

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() 与按钮选项一起使用，您可以为提交按钮分配一个自定义类，然后通过分配给跨度 (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.

当您通过 submit() 完成保存时，您可以使用相同的调用将文本设置回您想要的内容。

回答by JaredBroad

If it helps anyone: full implementation with example (PS: I borrowed getDialogButton() from another post on this site but can't remember link).

如果它对任何人有帮助：完整实现示例（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' );
    }
}

回答by CleanBold

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

回答by cssyphus

Note the correct wayto 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 jsFiddlefor an example.

这是一个使用非数组样式的示例： 请参阅此 jsFiddle示例。

回答by excyberlabber

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

对于我的 jquery ui (1.11.4) 版本，此格式用于更改按钮文本：

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

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

回答by Aaron Digulla

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

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

Note that for this, you must use a buttonelement, not an inputelement:

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

<button>Text here</button>

回答by Aivar Luist

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

回答by Yan

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

对于那些不想添加额外 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...');

回答by Sarfraz

You will have to use beforeSendand completeoptions accordingly. Check out the docs for more info:

您将不得不相应地使用beforeSend和complete选项。查看文档以获取更多信息：

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

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