Lo siento, pero por mi vida no puedo resolver esto.
function submit_order_form() { if (typeof storedFiles !== 'undefined') { jQuery('.overlay-loading').css('visibility', 'visible') return false; var formData = new FormData(); for (var key in storedFiles) { formData.append(key, storedFiles[key]); } formData.append("rep", $('#sales_rep').val() ); $.ajax({ url: '/send_invoice.php', type: 'POST', data: formData, dataType: "JSON", processData: false, contentType: false, cache: false, async: false, success: function (response) { jQuery('#new_files_ajax').empty(); jQuery('#new_files_ajax').text(response.message); jQuery('.overlay-loading').css('visibility', 'hidden') }, error: function(error) { jQuery('.overlay-loading').css('visibility', 'hidden') console.log(error); } }); }}
Quiero el
jQuery('.overlay-loading').css('visibility', 'visible')para ejecutarse antes de la llamada ajax, que no es así, la llamada ajax simplemente funciona bien, pero ese cambio de css de visibilidad nunca ocurre hasta justo al final durante 1 segundo y luego regresa nuevamente porque se llama en la función de éxito. Si devuelvo falso justo antes de la llamada ajax, funciona como se esperaba. ¿Qué demonios me estoy perdiendo aquí? No es asíncrono, debería estar esperando que se produzca esa llamada de visibilidad.
Completamente perplejo.
¿Está por casualidad llamando a esta función desde un botón incrustado en su página de marcado HTML dentro de la etiqueta <form> ? Si es así, deberá pasar el objeto de event a la función para poder llamar a event.preventDefault() , lo que evitará que la página se vuelva a cargar cuando se complete la solicitud.
De forma predeterminada, cuando se envía un formulario, el navegador se actualizará automáticamente, por lo que su alternancia de visibilidad nunca funcionará correctamente ya que la página se vuelve a cargar, por lo que la superposición volverá a su estado original de ser invisible.
Además, como una nota al margen con la llamada FormData , puede pasar el objeto de storedFiles al constructor en lugar de recorrer las claves de storedFiles y agregar cada propiedad a los datos de FormData que creó, ya que no está cambiando el nombre de las claves en los datos del formulario para pasar al punto final de la API.
No puedo estar seguro porque no tengo ningún otro código, pero puedes ver cómo funciona.
function submit_order_form() { if (typeof storedFiles !== 'undefined') { jQuery('.overlay-loading').css('visibility', 'visible') setTimeout(function(){ var formData = new FormData(); for (var key in storedFiles) { formData.append(key, storedFiles[key]); } formData.append("rep", $('#sales_rep').val() ); $.ajax({ url: '/send_invoice.php', type: 'POST', data: formData, dataType: "JSON", processData: false, contentType: false, cache: false, async: false, success: function (response) { jQuery('#new_files_ajax').empty(); jQuery('#new_files_ajax').text(response.message); jQuery('.overlay-loading').css('visibility', 'hidden') }, error: function(error) { jQuery('.overlay-loading').css('visibility', 'hidden') console.log(error); } }); }, 0); return false; // <========= } }Por supuesto, esto es temporal y en la práctica se recomienda arreglar todo el código con llamadas asincrónicas. (asincrónico: verdadero)