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

Question

Я использую диалоговое окно jQuery UI для отправки формы ajax. Я хочу изменить текст моей кнопки сохранения , чтобы подождать, когда пользователь нажмет на нее и вернется к сохранению при завершении вызова ajax. pls help me

Answer 1

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

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

<button>Text here</button> 

Answer 2

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

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

Answer 3

Предположив вы используете .dialog() с опцией кнопки, вы можете назначить пользовательский класс для кнопки отправки, а затем целевой внутренний текст кнопки с помощью класс, который присваивается пролет (Ui-кнопка-текст):

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

Когда экономия завершается с помощью передачи запроса(), вы можете использовать один и тот же вызов, чтобы установить текст обратно к тому, что вы хотите.

Answer 4

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

Answer 5

Если это поможет кому-: полная реализации с примером (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 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

Хотя вопрос очень стара я нахожу ответ очень прост и не было дано здесь.

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

Код JavaScript является:

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

Answer 8

Note the correct way создать несколько кнопок на лету:

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

Ниже приведен пример использования стиля без массива: See this jsFiddle для примера ,

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

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