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.
2
Answers
I can’t be sure because I don’t have any other code, but you can see how this works.
Of course, this is temporary and in practice it is recommended to fix the entire code with asynchronous calls. (async: true)
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 theevent
object to the function so you can callevent.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 thestoredFiles
object into the constructor rather than looping through the keys ofstoredFiles
and appending each property to theFormData
you created as you’re not renaming keys in the form data to pass to the API endpoint.