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

Question

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

Answer 1

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

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

JavaScript代码是:

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

Answer 2

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

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

Answer 4

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

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

<button>Text here</button>