Динамическое изменение диалогового окна JQuery UI Кнопка Текст

Ответ 1

Предполагая, что вы используете .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(), вы можете использовать один и тот же вызов, чтобы вернуть текст к тому, что вы хотите.

Ответ 2

Несмотря на то, что вопрос очень старый, я считаю, что ответ был очень простым, и он не был приведен здесь.

• Вы можете установить идентификатор кнопки и использовать ее.
• Все кнопки диалога являются кнопками jQuery UI, поэтому вы можете использовать функцию $().button() для изменения кнопки.

Код JavaScript:

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

Ответ 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' );
    }
}

Ответ 4

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

Ответ 5

Обратите внимание на правильный способ, чтобы создать несколько кнопок "на лету":

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

Вот пример использования стиля без массива: См. этот jsFiddle для примера.

Ответ 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'
          }
        ]
});

Ответ 7

Используйте $().text('Please Wait') перед вызовом AJAX, а затем добавьте $().text('Save') в качестве последней операции в обратном вызове.

Обратите внимание, что для этого вы должны использовать элемент button, а не элемент input:

<button>Text here</button>

Ответ 8

Вам нужно будет использовать опции beforeSend и complete. Ознакомьтесь с документами для получения дополнительной информации:

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

Ответ 9

Для моей версии jquery ui (1.11.4) этот формат работал, чтобы изменить текст кнопки:

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

Однако кнопка reset не содержала новый текст в диалоговом окне! Это было неприятно. JaredBroad ответ выше, это тот, который работал у меня, сначала вытащив все кнопки из диалогового окна, а затем перейдя по ссылке, чтобы найти кнопку для переименования. Затем он менял текст каждый раз.

Ответ 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');

Также вместо класса вы можете определить идентификатор для каждой кнопки (однако идентификатор должен быть уникальным)