2009-07-01 12 views
7

Sto utilizzando un modulo e jQuery per apportare una modifica rapida a un sito Web. Vorrei cambiare il testo del pulsante in "Salvato!" quindi cambialo di nuovo su Aggiorna dopo alcuni secondi in modo che l'utente possa modificare nuovamente il valore. Ovviamente possono colpire l'ora 'Salvato!' di nuovo, ma non sembra carino.Uso di jQuery per modificare il testo del pulsante di input dopo alcuni secondi

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

risposta

13

Primo argomento per setTimeout è la funzione. Quindi avvolgi il tuo codice all'interno di una funzione anonima e sei a posto.

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

Non riesco a testare questo codice in questo momento. Fammi sapere se non funziona.

MODIFICA: Come suggerito da redsquare, ha senso creare la chiusura dal pulsante di invio stesso.

+0

Grazie per aver sottolineato l'ovvio! :) –

+1

non è necessario eseguire il selettore di invio due volte, è possibile inserirlo in una variabile da utilizzare all'interno del setTimeout – redsquare

+0

concordato, modificato il codice per riflettere questo approccio. – SolutionYogi

0

Probabilmente si desidera avvolgere l'azione in una funzione:

setTimeout(function(){$(this).find(":submit").attr('value', 'Update')}, 2000); 
+0

Penso che "questo" all'interno della funzione anonima setTimeout non funzioni correttamente. Uno ha bisogno di usare la chiusura per catturare "questo". – SolutionYogi

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; 
}); 
2

Vorrei suggerire, forse, un diverso (a mio parere meglio) l'interfaccia di fornire un feedback che cambiare il testo del pulsante . È possibile utilizzare jGrowl o il widget dialog per visualizzare un messaggio tramite una richiamata dal metodo post.

$("form.stock").submit(function(){ 
    $.post(
     $(this).attr('action'), 
     { id: '123', stock: '1' }, 
     function() { $.jGrowl("Your update was successfully saved."); } 
    ); 
}); 
+0

+1 per parlare di usabilità (feedback) – karim79

6

Se in realtà è un tag "pulsante", quindi per modificarlo si utilizzerà.

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

Naturalmente se stai preformatura questo onClick per quel pulsante, allora si potrebbe facilmente passare solo (questo) in funzione di un oggetto e $ (this) .html ('Nuovo Testo'); anziché.

Spero che questo aiuti qualcuno.

Problemi correlati