i know that such a question has been asked thousand times, but i didn't find a solution for me.
I have a function, that is called when a form is submitted. It checks some form fields and send the data with ajax to a php script. The problem is, that it can need some seconds until php is finished and i wanted to fade in a css animation, that the user knows that he shall wait.
If there is an error in a form field, the animation is correctly faded in and out. But if the fields check is ok, mostly jQuery goes on and calls ajax without finishing the animation. Sometimes the animation is faded in, sometimes it stops after a few milliseconds and sometimes nothing happens until the answer from the php script comes back.
How can i tell jquery to wait with the execution of the ajax part until the animation is finished?
$(document).ready(function () {
$('.daten_form').submit(function () {
$("#loader-wrapper").fadeIn('normal');
hasError = false;
if ($('#delkfz').prop('checked',false)){
if ($('#fin').val() == '') {
$('#fin').addClass('error_class');
hasError = true;
}
}
if (hasError) {
$("#loader-wrapper").fadeOut("normal");
$('.error_box').show();
} else {
var einzelfz = false;
var weiter = false;
if ($('#einzelfz').val() == '1')
einzelfz = true;
if ($("#weiter").prop('checked') == true)
weiter = true;
var kvid = $('#kvid').val();
$.ajax({
type: 'POST',
url: 'kvc_write.php',
cache: false,
data: $(".daten_form").serialize(),
success: function (data) {
if (data == "error") {
$("#loader-wrapper").fadeOut("normal");
$('.success_box').hide();
$('.error_box').show();
} else if (data == "logout") {
var url = "index.php?ablauf=1";
$(location).attr('href',url);
} else if (data == "success" && (einzelfz || !weiter)) {
var url = "prepkvpdf.php?kvid="+kvid;
$(location).attr('href',url);
} else {
$("#loader-wrapper").fadeOut("normal");
$('.error_box').hide();
$('.success_box').show();
}
}
});
}
return false;
});
});
The best way to use a Ajax:
$.ajax({
data: data,
type: "GET", //or POST
url: "YOU-KNOW.php",
beforeSend: function(){
//script runs when ajax send data
},
success: function(data){
//script runs when php finish the thing and tell me data.
}
});