I am sorry, but I cannot for the life of me figure this out.
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);
}
});
}
}
I want the
jQuery('.overlay-loading').css('visibility', 'visible')
to run before the ajax call, which it does not, the ajax call just goes through fine but that visibility css change never happens until right at the end for 1 second and then goes back again because its called in the success function. If I return false right before the ajax call it works as expected. What in the world am I missing here? Its not async it should be waiting for that visibility call to take place.
Completely stumped.
Are you by any chance calling this function from a button embedded on your HTML markup page inside of the <form> tag? If so, you'll need to pass the event object to the function so you can call event.preventDefault() which will prevent the page from reloading on when the request goes through.
By default when a form is submitted, the browser will automatically refresh, so you're visibility toggle will never work properly since the page is reloaded so the overlay would be rendered back to it's original state of being invisible.
Also just as a side note with the FormData call, you can pass the storedFiles object into the constructor rather than looping through the keys of storedFiles and appending each property to the FormData you created as you're not renaming keys in the form data to pass to the API endpoint.
I can't be sure because I don't have any other code, but you can see how this works.
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; // <=========
}
}
Of course, this is temporary and in practice it is recommended to fix the entire code with asynchronous calls. (async: true)