Dialogfeld "jQuery UI dynamisch ändern" Schaltfläche Text

Question

Ich verwende das jQuery UI-Dialogfeld für die Übermittlung von AJAX-Formularen. Ich möchte den Text meiner Schaltfläche speichern, um zu warten, wenn Benutzer darauf klicken und zurück zu speichern, wenn Ajax-Aufruf abgeschlossen. pls hilfe mich

Answer 1

Verwenden Sie $().text('Please Wait') bevor Sie den AJAX-Anruf und dann $().text('Save') als die letzte Operation in den Erfolg Rückruf hinzufügen.

Hinweis dafür, dass Sie ein button Element verwenden müssen, nicht ein input Element:

<button>Text here</button> 

Answer 2

Sie müssen entsprechend beforeSend und complete Optionen verwenden. Schauen Sie sich die Dokumentation für weitere Informationen:

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

Answer 3

Vorausgesetzt, Sie verwenden .dialog() mit der Tasten-Option können Sie eine benutzerdefinierte Klasse mit dem Submit-Button zuweisen, und Ziel dann die innere Taste Text über die Klasse, auf die Spanne (ui-button-Text) zugeordnet:

$("#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 Ihre speichern vervollständigt über die submit(), können Sie den gleichen Anruf, um den Text zurück zu setzen, was Sie wollen.

Answer 4

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

Answer 5

Wenn es jemand hilft: vollständige Umsetzung mit Beispiel (PS: Ich lieh getDialogButton() von einem anderen Beitrag auf dieser Seite aber kann mich nicht erinnern 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'); 
    } 
} 

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

Obwohl die Frage ist sehr alt ich die Antwort zu finden ist sehr einfach zu sein und es hier nicht gegeben.

• Sie können eine ID für die Schaltfläche festlegen und verwenden.
• Alle Dialogfelder sind jQuery UI-Schaltflächen, daher können Sie die Schaltfläche $().button() verwenden, um die Schaltfläche zu ändern.

Der JavaScript-Code ist:

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

Answer 8

Note the correct way mehr Tasten on the fly zu erstellen:

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

Hier ist ein Beispiel für den Nicht-Array-Stil mit: See this jsFiddle für ein Beispiel .

Answer 9

Für meine Version von jQuery UI (1.11.4), arbeitete dieses Format auf den Button Text zu ändern:

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

es jedoch hat, nicht die Schaltfläche mit dem neuen Text in das Dialog zurückgesetzt! Das war frustrierend. JaredBroad 's obige Antwort ist diejenige, die für mich funktionierte, indem zuerst alle Knöpfe aus dem Dialog gezogen wurden und dann durchgeschliffen wurde, um die Schaltfläche zum Umbenennen zu finden. Dann änderte es jedes Mal den Text.

Answer 10

Ich finde, dass wenn ich viele Dialoge mit den gleichen Tasten verwende, dann kann ich Klasse zu jeder Schaltfläche in jedem Dialogfeld definieren und dann den Text auf allen Schaltflächen ändern.

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

auch statt Klasse Sie id für jede Taste definieren können (jedoch id sollte eindeutig sein)