Dynamiczne zmienianie okna dialogowego interfejsu jQuery Przycisk Tekst

Question

Używam okna dialogowego jQuery UI do przesyłania formularza ajax. Chcę zmienić tekst przycisku zapisu , aby czekać, gdy użytkownik kliknie na nim iz powrotem do Zapisz po zakończeniu wywołania ajax. pls Pomóż mi

Answer 1

Użyj $().text('Please Wait') przed wykonaniem połączenia AJAX, a następnie dodaj $().text('Save') jako ostatnią operację w powrocie połączenia.

Należy pamiętać, że do tego, należy użyć elementu button, a nie elementem input:

<button>Text here</button> 

Answer 2

Będziesz musiał użyć beforeSend i complete opcje odpowiednio. Sprawdź docs o więcej informacji:

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

Answer 3

Zakładając, że używasz .dialog() z opcją przycisków można przypisać klasę niestandardową do przycisku Prześlij, a następnie kierować się wewnętrzną tekstu za pomocą przycisku klasa, który jest przypisany do rozpiętości (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' 
       } 
      ] 
    }); 

Gdy Zapisz uzupełnia poprzez submit(), można użyć tego samego połączenia, aby ustawić tekst z powrotem do tego, co chcesz.

Answer 4

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

Answer 5

Jeśli to pomoże ktoś: pełne wdrożenie z przykładu (PS: Pożyczyłem getDialogButton() z innym poście na tej stronie, ale nie pamiętam linku).

//-> 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

Choć pytanie jest bardzo stary znajdę odpowiedź jest bardzo prosta i nie została podana tutaj.

• Możesz ustawić identyfikator przycisku i użyć go.
• Wszystkie przyciski dialogowe są przyciskami jQuery UI, dlatego można użyć funkcji $().button() do modyfikacji przycisku.

Kod JavaScript jest:

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

Answer 8

Note the correct way tworzenie wielu przycisków w locie:

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

Oto przykład przy użyciu stylu non-tablicy: See this jsFiddle na przykład .

Answer 9

Dla mojej wersji jQuery UI (1.11.4), format ten pracował zmienić przycisk tekst:

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

Jednak nie zresetować przycisk z nowym tekstem w oknie! To było frustrujące. JaredBroad Odpowiedź powyżej to ta, która zadziałała przede mną, najpierw wyciągając wszystkie przyciski z okna dialogowego, a następnie przełączając się, aby znaleźć przycisk do zmiany nazwy. Potem za każdym razem zmieniał tekst.

Answer 10

Uważam, że jeśli korzystam z wielu okien dialogowych za pomocą tych samych przycisków, mogę zdefiniować klasę dla każdego przycisku w każdym oknie dialogowym, a następnie zmienić tekst na wszystkich przyciskach.

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

Również zamiast klasy można zdefiniować id dla każdego przycisku (jednak id powinien być unikalny)