Mit jQuery zu ändern, input button text wieder nach ein paar Sekunden

Bin ich über ein Formular und jQuery, um eine schnelle Veränderung auf einer Website. Ich möchte den text der Schaltfläche 'Gespeichert!', dann ändern Sie es zurück zu Update nach ein paar Sekunden, damit sich die Benutzer können den Wert ändern, wieder. Natürlich können Sie schlagen das jetzt "Gespart"! " - Taste wieder, aber es sieht nicht schön aus.

$("form.stock").submit(function(){
    //Example Post
    $.post($(this).attr('action'), { id: '123', stock: '1' });
    $(this).find(":submit").attr('value','Saved!');
    //This doesn't work, but is what I would like to do
    setTimeout($(this).find(":submit").attr('value','Update'), 2000);
    return false;
});
InformationsquelleAutor Chris Bartow | 2009-07-01
  1. 13

    Erste argument für die setTimeout Funktion ist. So wickeln Sie Ihren code in eine anonyme Funktion und Sie sind gut zu gehen.

    $("form.stock").submit(function(){
    //Example Post
    $.post($(this).attr('action'), { id: '123', stock: '1' });
    var submit = $(this).find(":submit").attr('value','Saved!'); //Creating closure for setTimeout function. 
    setTimeout(function() { $(submit).attr('value','Update') }, 2000);
    return false;
});

    Ich bin nicht in der Lage diesen code zu testen, gerade jetzt. Lassen Sie mich wissen, wenn es nicht funktioniert.

    EDIT: Wie vorgeschlagen von redsquare, macht es Sinn, zu erstellen Schließung von den submit-button selbst.

    • Danke für den Hinweis auf das offensichtliche! 🙂
    • keine Notwendigkeit zum ausführen des submit-selector zweimal, können Sie dieses in eine var zu verwenden, die innerhalb der setTimeout
    • Vereinbart ist, verändert Sie den code entsprechend diesem Ansatz.
    InformationsquelleAutor SolutionYogi
  2. 6

    Wenn es eigentlich eine "button" - tag dann, es zu ändern, die Sie verwenden würden.

    $('#button_id').html('New Text');

    Natürlich, wenn Sie ausführen diese onClick für die Schaltfläche, dann können Sie einfach nur übergeben (this) in der Funktion als Objekt und $(this).html('Neuer Text'); statt.

    Hoffe, das jemand hilft.

    InformationsquelleAutor RkaneKnight
  3. 2

    Ich würde vorschlagen, vielleicht ein anderes (meiner Meinung nach besser) - Schnittstelle, um feedback zu geben als änderung den text der Schaltfläche. Könnten Sie jGrowl oder die dialog widget zur Anzeige einer Meldung über einen Rückruf von der post-Methode.

    $("form.stock").submit(function(){
    $.post(
        $(this).attr('action'),
        { id: '123', stock: '1' },
        function() { $.jGrowl("Your update was successfully saved."); }
    );
});
    • +1 für das Gespräch usability (feedback)
    InformationsquelleAutor tvanfosson
  4. 0

    Werden Sie wahrscheinlich wollen, wickeln Sie die Aktion in einer Funktion:

    setTimeout(function(){$(this).find(":submit").attr('value', 'Update')}, 2000);
    • Ich denke, dass 'this' innerhalb der setTimeout anonyme Funktion wird nicht korrekt funktionieren. Man braucht Schließung zu erfassen "dieser".
    InformationsquelleAutor Peter
  5. 0
    $("form.stock").submit(function(){
    var $form = $(this);
    $.post( $form.attr('action'), { id: '123', stock: '1' } );
    var $submit = $form.find(":submit").attr('value','Saved!');
    window.setTimeout(function() {
         $submit.attr('value','Update') 
    }, 2000);
    return false;
});
    InformationsquelleAutor redsquare
Schreibe einen Kommentar