Dynamisch änderndes jQuery-UI-Dialogfeld Schaltflächentext

Ich verwende das jQuery-UI-Dialogfeld zum Senden von Ajax-Formularen. Ich möchte den Text meiner Schaltfläche “Speichern” so ändern, dass er wartet, wenn der Benutzer darauf klickt, und zurück zu “Speichern”, wenn der Ajax-Aufruf abgeschlossen ist. Bitte hilf mir

Obwohl die Frage sehr alt ist, finde ich die Antwort sehr einfach und wurde hier nicht gegeben.

• Sie können eine ID für die Schaltfläche festlegen und diese verwenden.
• Alle Dialogschaltflächen sind jQuery-UI-Schaltflächen, die Sie verwenden können $().button() Funktion zum Ändern der Schaltfläche.

Der JavaScript-Code lautet:

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

Angenommen, Sie verwenden .dialog() mit der Option buttons, können Sie der Submit-Schaltfläche eine benutzerdefinierte Klasse zuweisen und dann den Text der inneren Schaltfläche über die Klasse ansprechen, die der Spanne zugewiesen ist (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'
              }
            ]
    });

Wenn Ihr Speichern über das submit () abgeschlossen ist, können Sie den gleichen Aufruf verwenden, um den Text wieder auf das zu setzen, was Sie möchten.

Wenn es jemandem hilft: vollständige Implementierung mit Beispiel (PS: Ich habe getDialogButton() von einem anderen Beitrag auf dieser Seite ausgeliehen, kann mich aber nicht an den Link erinnern).

//-> 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...");

Beachten Sie die richtige Methode zum Erstellen mehrerer Schaltflächen im Handumdrehen:

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

Hier ist ein Beispiel für den Nicht-Array-Stil:
Siehe diese jsFiddle zum Beispiel.

Verwenden $().text('Please Wait') bevor Sie den AJAX-Aufruf durchführen und dann hinzufügen $().text('Save') als letzte Operation im Erfolgsrückruf.

Beachten Sie, dass Sie dafür a verwenden müssen button Element, kein input Element:

<button>Text here</button>

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