I have a script that loops through IPs on my local network, checking if anything is there. Every iteration, I submit an AJAX request to get the HTTP status code using cURL, which is returned to my Javascript. I already have built functions to calculate where the progress bar should be, however it only updates the progress bar when the entire script is finished executing.

Here's what I have so far (I'm only using 0-23 in this example because I'm on 199.235.130.22 and I return '200')

function updateProgress(percentage){
    document.getElementById('progressBar').style.width = percentage+'%';
    $('#progressText').html(percentage+'%');
}
for(host = 0; host <= 23; host++){
    ipToCheck = network_addr+'130.'+host;
    updateProgress(100/host);
    $.ajax({
        type: 'GET',
        url: 'js/scanhelper.php',
        data: {
            ip: ipToCheck
    }
    }).done(function(msg) {
        updateProgress(100/host);
        if(msg!=0){
            logSuccess(ipToCheck);
        }
    });
    pausecomp(200);  //Just a sleep function to simulate actual processing
}

My Bootstrap HTML is simply

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

And, if it matters, my cURL PHP script is here:

What this should do is, on every iteration, update the progress bar's width to 100 (as in 100%) divided by the current iteration. It may not be the correct math, but the point is it's only updating after all iterations are complete, freezing the page while it's running.

How can I fix this?

I have a script that loops through IPs on my local network, checking if anything is there. Every iteration, I submit an AJAX request to get the HTTP status code using cURL, which is returned to my Javascript. I already have built functions to calculate where the progress bar should be, however it only updates the progress bar when the entire script is finished executing.

Here's what I have so far (I'm only using 0-23 in this example because I'm on 199.235.130.22 and I return '200')

function updateProgress(percentage){
    document.getElementById('progressBar').style.width = percentage+'%';
    $('#progressText').html(percentage+'%');
}
for(host = 0; host <= 23; host++){
    ipToCheck = network_addr+'130.'+host;
    updateProgress(100/host);
    $.ajax({
        type: 'GET',
        url: 'js/scanhelper.php',
        data: {
            ip: ipToCheck
    }
    }).done(function(msg) {
        updateProgress(100/host);
        if(msg!=0){
            logSuccess(ipToCheck);
        }
    });
    pausecomp(200);  //Just a sleep function to simulate actual processing
}

My Bootstrap HTML is simply

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

And, if it matters, my cURL PHP script is here: http://pastebin.com/JRZckdVb

What this should do is, on every iteration, update the progress bar's width to 100 (as in 100%) divided by the current iteration. It may not be the correct math, but the point is it's only updating after all iterations are complete, freezing the page while it's running.

How can I fix this?

• javascript
• jquery
• user-interface
• twitter-bootstrap
• progress-bar

• Because the for loop is blocking. And whatever sleep function you are doing is also probably blocking. – epascarello Commented Dec 20, 2012 at 13:59
• @epascarello Blocking? How do I get it to un-block? – Scott Commented Dec 20, 2012 at 14:01
• Do not use a for/while loop. – epascarello Commented Dec 20, 2012 at 14:02
• 1 Sorry to sound ignorant (I am), but I need some sort of loop to run the script for values 0-23 (in this case). Running procedurally would be a LOT of repeated code, unless there's another way to do it – Scott Commented Dec 20, 2012 at 14:05

2 Answers 2

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>

The answer from @zerObit are onli 2/3 of the thrue! You have also to set aria-valuenow.

In some cases, the progress bar would be hidden. You can do this by:

$('#progressBar').attr('aria-valuenow', percentage);