Tengo tres funciones de Ajax que me gustaría completar antes de enviar un formulario, pero también se activan al enviar.
¿Cuál sería la mejor manera de obligar a jQuery a esperar hasta que se completen todas las funciones de Ajax antes de enviar el formulario? Mi código es el siguiente:
$('form[name="regForm"]').on('submit', function() { ajaxFuncOne(); ajaxFuncTwo(); ajaxFuncThree(); });e.preventDefault(); ),$.when() , No olvide desvincular la funcionalidad de escucha on('submit') antes de enviar, de lo contrario terminará en un bucle infinito (ya que submit() se activará on('submit') , que activará submit() , Etcétera).
Al igual que:
$('form[name="regForm"]').on('submit', function(e) { e.preventDefault(); $.when( ajaxFuncOne(); ajaxFuncTwo(); ajaxFuncThree(); ).done(function(){ $('form[name="regForm"]').unbind('submit').submit(); }); });Consulte https://api.jquery.com/jquery.when/ para obtener más información sobre $.when().
Defina una variable de contador para rastrear cuántas funciones ajax han tenido éxito, en el ámbito accesible a todas las funciones. Supongamos que se llama c . Luego, impedir la sumisión si no es igual a tres. Deshabilite el botón para evitar más clics.
$('form[name="regForm"]').on('submit', function() { if(c < 3) { e.preventDefault(); $(this).attr('disabled','disabled'); ajaxFuncOne(); ajaxFuncTwo(); ajaxFuncThree(); } });Luego llame a lo siguiente en cada controlador de éxito.
function track() { if(++c == 3) $('form[name="regForm"]').submit(); }Solo cuando los tres hayan tenido éxito, se enviará el formulario.