Asynchronously Updating A Bootstrap Progress Bar With JQuery's $.ajax

Answer :

aren't you dividing by zero here when host = 0 in the for loop?

updateProgress(100/host); 

you can use a variable hosts to keep track of the number of hosts you have.Then the progress will be as below.

var hosts = 23;// total number of hosts updateProgress((host/hosts)*100); 

The other thing is the ajax you're firing is asynchronous, so what's happening is it fires and doesn't wait for the results. You can either "scan" each host serially one at a time updating the progress bar or scan all of them simultaneously having the progress bar update as the asynch results come back. Can you specify which behavior you're trying to achieve?

[UPDATE] toggle async flag in the ajax call below for what you want.

function updateProgress(percentage){     if(percentage > 100) percentage = 100;     $('#progressBar').css('width', percentage+'%');     $('#progressBar').html(percentage+'%'); }  var hosts = 23; var hostsDone = 0; for(host = 0; host <= hosts; host++){     ipToCheck = network_addr+'130.'+host;     $.ajax({         type: 'GET',         url: 'js/scanhelper.php',         async:true,         data: {             ip: ipToCheck     }     }).done(function(msg) {         hostsDone++;         updateProgress((hostsDone/hosts)*100);         if(msg!=0){             logSuccess(ipToCheck);         }     }); } 

if you're looking for visuals you should set the height of '#progressBar' to something non-zero and maybe background green.

<div class="progress progress-striped active" style="height:44px;">     <div id="progressBar" class="bar" style="height:44px;width:1%;background-color:green"></div> </div>