I have a need for a script to fire off ajax requests in a sequential order. I am building a user profile in our system. Each ajax function builds a part of the profile. After each part of the profile is done, the client will get a response, causing the script moves on to the next part. My goal is to show the progress as each part is built. Something like:
Building User.......done.
Building Email.....
And so on.
My problem here is that the ajax fires off all at once, which while expected is not sequential as needed. I don't want to use asych:false
because of the known caveats. I have read about just putting the next ajax call in the success of the previous. I am trying to avoid this because there are approx 15-20 calls I will have to make. That page would be ugly to read. I am trying the array approach as it seems the cleanest.
$(function(){
//array of functions
var myArray = {'buildUser':'Building User','buildEmail':'Building Email'};
$('#result').html("");
//loop through array
$.each(myArray, function(key, value) {
//build "working" line
$('#result').append("<div id="+key+">"+value+".....</div>");
//send request to script
$.ajax({
type: "POST",
url: "modules/userAdd/"+key+".php",
data: "data="+data,
success: function(result) {
//replace "working" with "done"
$('#'+key).html(value+".....Done");
}
})
});
});