I have an AJAX that need to have async:false and beforeSend function to work together. I have to enable loading spinner before AJAX call and stop the spinner after AJAX done, But I also set to async:false to next the step after AJAX done. I am using jQuery Step Wizard
This is my current script.
ajax_success = false;
$.ajax({
url : url,
type : 'POST',
data : regist_data,
cache : false,
contentType : false,
processData : false,
async : false,
dataType : 'JSON',
beforeSend : function() {
$("#loading-div").removeAttr("class");
$("#loading-div").addClass("overlay overlay-on");
}
})
.done(function(data){
$("#loading-div").removeAttr("class");
$("#loading-div").addClass("overlay overlay-off");
if(data.insert_status == "success"){
toastr.success("Your registration is successfully done", 'Congratulations... ');
ajax_success = true;
}else{
toastr.error("Please contact the Administrator", 'Fatal Error... ');
ajax_success = false;
return false;
}
})
.fail(function(jqXHR, textStatus, errorThrown){
$("#loading-div").removeAttr("class");
$("#loading-div").addClass("overlay overlay-off");
toastr.error(errorThrown, 'Error... ');
ajax_success = false;
return false
});
if(ajax_success){ //I have put this condition inside AJAX done and outside AJAX call. Still same result
return true;
}
else{
toastr.error("Fail");
return false;
}
If I remove async:false the loader is working and the toastr.success is executed. But, it not move to the wizard next step.
If I add async:false the loader is not working but it move to the next step.
How to make it both working properly? Any help or another approach greatly appreciated
