Animating a progress bar with each Ajax call

Question

In short, I have a javascript array with some csv files to load into a mysql database, and created a script that makes ajax () calls to a php page that handles uploading the file into the database. On the client side there is a progressbar that moves with each file loaded into the database. If I use 'async: false', everything goes ok but browser is blocked and I do not want this thing, but if I use 'async: true', everything happens very quickly and progressbar does not keep pace with each file loaded synchronously. Can anyone structure the code so that ptogressbar to keep pace with the each of the files uploaded?

<button id="loadfiles"class="btn"><span>Start Loading</span><span style="display: none">Stop Loading</span></button>

<script>
$(document).ready(function(){

    var strFiles = 'SC2RFFBCRMEPOSAPP20131022.csv|SC2RFFBDEALERSORO20131022.csv|SC2ROFUOR00_ESHOP20131026.csv|SC2ROFUOR00_ESHOP20131027.csv|SC2ROFUOR00_ESHOP20131028.csv|SC2RFSFCRMEPOSAPP20131022.csv|SC2RFSFDEALERSORO20131022.csv|SC2ROSFWEBSHOPAPP20131022.csv|SC2RFRPCRMEPOSAPP20131022.csv|SC2RFRPDEALERSORO20131022.csv|SC2RORPOR00_ESHOP20131022.csv|SC2RORPWEBSHOPAPP20131022.csv|Active_range_20131022.csv|Active_range_20131023.csv|Active_range_20131024.csv|SC2ROZBOR00_SLRM_20131019(1).csv|SC2ROZBOR00_SLRM_20131019.csv' ;
    var arrFiles = strFiles.split('|');
    var strFileType = {Full:5,Scope:3,Proposal:4,ActiveRange:3,ForceValue:2} ;
    var pragcycle = 0;
    var step = 0 ;
    var increment = 0;
    var i = 0

    $("#loadfiles").click(function(){
        for (key in strFileType) {  
            step = 100 / strFileType[key];
            pragcycle = pragcycle + strFileType[key];
            increment = 0;
            for (i;i<pragcycle;i++) {   
                var request = $.ajax({
                    url:'/quickadmin/php/admin/pages/AppLoadCSV.php',
                    async: false,
                    data: "basename=" + arrFiles[i],
                    success:function() {
                        increment = increment + step;
                        $("." + key).attr("style","width: " + increment + "%");
                    }
                })
            }
        }
    });
});
</script>

Answer 1

The magic word you are searching is recursion. It allows you to send async-ajax in a specified order an there will be never 2 ajax-calls at the same time. In addition to that, it is non-blocking.

You just need to build an array at first and give it to the recursive-function.

$(document).ready(function(){

    var strFiles = 'SC2RFFBCRMEPOSAPP20131022.csv|SC2RFFBDEALERSORO20131022.csv|SC2ROFUOR00_ESHOP20131026.csv|SC2ROFUOR00_ESHOP20131027.csv|SC2ROFUOR00_ESHOP20131028.csv|SC2RFSFCRMEPOSAPP20131022.csv|SC2RFSFDEALERSORO20131022.csv|SC2ROSFWEBSHOPAPP20131022.csv|SC2RFRPCRMEPOSAPP20131022.csv|SC2RFRPDEALERSORO20131022.csv|SC2RORPOR00_ESHOP20131022.csv|SC2RORPWEBSHOPAPP20131022.csv|Active_range_20131022.csv|Active_range_20131023.csv|Active_range_20131024.csv|SC2ROZBOR00_SLRM_20131019(1).csv|SC2ROZBOR00_SLRM_20131019.csv' ;
    var arrFiles = strFiles.split('|');
    var strFileType = {Full:5,Scope:3,Proposal:4,ActiveRange:3,ForceValue:2} ;
    var pragcycle = 0;
    var step = 0 ;
    var increment = 0;
    var i = 0

    $("#loadfiles").click(function(){
        var array=[]

        //Maybe set-up your progressbar here

        for (key in strFileType) {  
            step = 100 / strFileType[key];
            pragcycle = pragcycle + strFileType[key];
            increment = 0;
            for (i;i<pragcycle;i++) {   
                array.push(arrFiles[i]);
            }
        }
        recursivefunction(0,array);
});

function recursivefunction(index,array) {
    if((index!=array.length)&&(array.length!=0)) {
        $.ajax({
            url: "/quickadmin/php/admin/pages/AppLoadCSV.php",
            data: "basename=" + array[index],
            success: function (data) {
                //Updating your progressbar and stuff
                increment = increment + step;
                $("." + key).attr("style","width: " + increment + "%");
                recursivefunction(index+1,array);
            }
        });
    } else {
        //You are finished
    }
}

Answer 2

Not sure if I have understood your question at all. But just to add my two cents, have you checked:

url:'/quickadmin/php/admin/AppLoadCSV.php',

         data: "basename=" + arrFiles[i] ,

         **beforeSend: function(){**

         $("#loading").show();

         },

         **complete: function(){**

         $("#loading").hide();

         },

         success:  function (data) {
         ...