Finestra di dialogo dell’interfaccia utente jQuery con modifica dynamic Pulsante Testo

Sto usando jQuery UI Dialog box for ajax form submit. Voglio cambiare il testo del mio pulsante di salvataggio in attesa, quando l’utente fa clic su di esso e torna a Salva quando la chiamata ajax è stata completata. pls help me

Supponendo che stai usando .dialog () con l’opzione bottoni, puoi assegnare una class personalizzata al pulsante di invio, quindi indirizzare il testo del pulsante interno alla class che è assegnata allo 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' } ] }); 

Una volta completato il salvataggio tramite submit (), è ansible utilizzare la stessa chiamata per reimpostare il testo su ciò che si desidera.

Sebbene la domanda sia molto antica, trovo che la risposta sia molto semplice e non è stata data qui.

  • Puoi impostare un id per il pulsante e usarlo.
  • Tutti i pulsanti di dialogo sono pulsanti dell’interfaccia utente jQuery, quindi è ansible utilizzare la funzione $().button() per modificare il pulsante.

Il codice JavaScript è:

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

Se aiuta qualcuno: implementazione completa con esempio (PS: ho preso in prestito getDialogButton () da un altro post su questo sito ma non ricordo il link).

 //-> 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' ); } } 
 $(".ui-dialog-buttonpane button:contains('Save') span").text("Please wait..."); 

Nota il modo corretto per creare più pulsanti al volo:

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

Ecco un esempio usando lo stile non-array: vedi questo jsFiddle per un esempio.

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

Usa $().text('Please Wait') prima di effettuare la chiamata AJAX e quindi aggiungi $().text('Save') come ultima operazione nella callback di successo.

Nota che per questo, devi usare un elemento button , non un elemento input :

  

Dovrai usare beforeSend e complete opzioni di conseguenza. Dai un’occhiata ai documenti per maggiori informazioni:

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

Per la mia versione di jquery ui (1.11.4), questo formato ha funzionato per cambiare il testo del pulsante:

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

Tuttavia, non ha ripristinato il pulsante con il nuovo testo nella finestra di dialogo! E ‘stato frustrante. La risposta di JaredBroad sopra è quella che ha funzionato per me, prima estraendo tutti i pulsanti dalla finestra di dialogo, quindi eseguendo il loop per trovare il pulsante per rinominare. Quindi ha cambiato il testo ogni volta.

Trovo che se utilizzo molte windows di dialogo con gli stessi pulsanti, posso definire la class per ciascun pulsante in ogni finestra di dialogo e quindi modificare il testo su tutti i pulsanti.

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

Inoltre al posto della class puoi definire l’ id per ogni pulsante (tuttavia l’ id dovrebbe essere univoco)