Question

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

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（），您可以为提交按钮指定自定义类，然后通过分配给跨度的类（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：我从本网站上的另一篇文章借用了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' );
    }
}

Answer 4

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

Answer 5

Note the correct way即时创建多个按钮：

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

以下是使用非数组样式的示例： See this jsFiddle举个例子。

Answer 6

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

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

<button>Text here</button>

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

Answer 8

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

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

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

Answer 9

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

private Optional<CustomUserObject> getCustomUserObject(TreeNode node) {
    Optional<DefaultMutableTreeNode> optDefaultMutableTreeNode = OptionalUtil.cast(Optional.ofNullable(node), DefaultMutableTreeNode.class);
    Optional<Object> optUserObject = optDefaultMutableTreeNode.map(DefaultMutableTreeNode::getUserObject); //
    return OptionalUtil.cast(optUserObject, CustomUserObject.class);
}


/**
 * Maps the given optional, if the containing element is an instance of the given class.
 * Returns empty if the containing object is not an instance of the given class.
 * 
 * @param orgOptional
 *        given optional
 * @param clazz
 *        given class.
 * @return the resulting {@link Optional}.
 */
public static <T, X> Optional<T> cast(Optional<X> orgOptional, Class<T> clazz) {
    return orgOptional //
        .filter(clazz::isInstance) // check instance
        .map(clazz::cast); // cast
}

/**
 * Maps the given stream, if the containing element is an instance of the given class.
 * Returns empty if the containing object is not an instance of the given class.
 * 
 * @param orgStream
 *        given optional
 * @param clazz
 *        given class.
 * @return the resulting {@link Optional}.
 */
public static <T, X> Stream<T> cast(Stream<X> orgStream, Class<T> clazz) {
    return orgStream //
        .filter(clazz::isInstance) // check instance
        .map(clazz::cast); // cast
}

Answer 10

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

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

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

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

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

11 个答案: