Usando jQuery para cambiar el texto del botón de entrada de nuevo después de unos segundos

Question

Estoy usando un formulario y jQuery para hacer un cambio rápido en un sitio web. Me gustaría cambiar el texto del botón a 'Guardado'. luego cámbielo a Actualizar después de unos segundos para que el usuario pueda cambiar el valor nuevamente. Por supuesto, pueden golpear el ahora '¡Salvado!' botón de nuevo, pero no se ve bien.

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

Answer 1

Primer argumento para setTimeout es la función. Así que envuelva su código dentro de una función anónima y estará listo.

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

no soy capaz de probar este código en este momento. Avísame si no funciona.

EDIT: Según lo sugerido por redsquare, tiene sentido crear un cierre desde el botón de enviar.

Answer 2

Es posible que desee para envolver la acción en una función:

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

Answer 3

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

Answer 4

Yo sugeriría, tal vez, una diferente (en una mejor mi opinión) de la interfaz de dar la regeneración de cambiar el texto del botón . Puede usar jGrowl o el widget dialog para mostrar un mensaje a través de una devolución de llamada desde el método de publicación.

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

Answer 5

Si en realidad se trata de una etiqueta de "botón", para cambiarla, la usará.

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

Por supuesto, si usted está preformación este onClick para ese botón, entonces podría fácilmente sólo tiene que pasar (este) en la función como un objeto y (esto) .html $ ('Nuevo texto'); en lugar.

Espero que esto ayude a alguien.