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

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

Answer 1

假设你使用带按钮选项的.dialog（），你可以为提交按钮分配一个自定义类，然后通过分配给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 2

虽然问题很严重，但我发现答案很简单，而且这里没有给出。

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

JavaScript代码是：

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

Answer 3

如果它可以帮助任何人：完全实现示例（PS：我从这个网站上的另一个post借了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

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

Answer 5

请注意动态创建多个按钮的正确方法 ：

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

下面是使用非数组样式的示例： 有关示例， 请参阅此jsFiddle 。

Answer 6

 $("#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 7

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

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

 Text here 

Answer 8

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

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

Answer 9

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

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

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

Answer 10

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

 $('#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 ，而不是类 （但id应该是唯一的）