Jquery:: Ajax Powered Progress Bar

Jquery:: Ajax powered progress bar?

You could have an animated gif load via .html() into the results area until your ajax function returns back the results. Just an idea.

Regarding the jquery ui progress bar, intermittently through your script you'll want to echo a numeric value representing the percent complete as an assigned javascript variable. For example...

// text example php script
if (isset($_GET['twentyfive-percent'])) {
    sleep(2); // I used sleep() to simulate processing
    echo '$("#progressbar").progressbar({ value: 25 });';
    }
if (isset($_GET['fifty-percent'])) {
    sleep(2);
    echo '$("#progressbar").progressbar({ value: 50 });';
    }
if (isset($_GET['seventyfive-percent'])) {
    sleep(2);
    echo '$("#progressbar").progressbar({ value: 75 });';
    }
if (isset($_GET['onehundred-percent'])) {
    sleep(2);
    echo '$("#progressbar").progressbar({ value: 100 });';
    }

And below is the function I used to get the progress bar to update its position. A little nuts, I know.

avail_elem = 0;
function progress_bar() {
    progress_status = $('#progressbar').progressbar('value');
    progress_status_avail = ['twentyfive-percent', 'fifty-percent', 'seventyfive-percent', 'onehundred-percent'];
    if (progress_status != '100') {
        $.ajax({
            url: 'test.php?' + progress_status_avail[avail_elem],
            success: function(msg) {
                eval(msg);
                avail_elem++;
                progress_bar();
                }
            });
        }
    }

If I had to guess, I bet there is a better way... But this is the way it worked for me when I tested it.

ASP.net progress bar updated via jQuery ajax during async operation

You are missing just one basic point. Your ajax calls will not survive a postback.

You cannot call PROGRESS.startProgress() on button click, cause you want the page to post back immediately after that. A postback would cause your ajax call to be terminated.

If you want to show a progress bar, you must upload the file too using ajax and not by using a postback. There are plugins like uploadify that can help.

Knob circular progress bar with ajax

Here i have achieved your requirement with jQuery roundSlider plugin.. I think this is suitable for you, since you can easily customize the appearance and animation style of this slider.. Check the below demo:

Demo

For more details check the demos and documentation page.

Edit:

In the ajax success what value you got, you can assign that value to the slider. Like below:

$.ajax({
    type: "GET",
    url: "currentitemswidth.php",
    success: function(msg){
        $('#val').val(msg);

        // use the below code to dynamically update the roundSlider value
        $("#slider").roundSlider("option", "value", msg);
    }
});

Asynchronously updating a Bootstrap progress bar with jQuery's $.ajax

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>

AJAX Page Download progress

As far as I know, the $.ajax() function has no support for "bytes loaded". It only has start and complete events, no progress event.

I found this thread detailing an attempt, but apparently the code works in several browsers but not IE. The suggestion they make is to show progress in other browsers, and a simple "loading..." message for IE.

Do note that there are several similar discussions on the same site, so browse the left panel for other methods.

Filling jQuery Progress Bar with results from an external php file

This is not possible, you could split your php file and call each one of them. After the result of one php file you can increase your progress bar.

Each call could look like this:

// buildFacetesPath.php
$.ajax({
  url: 'batch/buildFacetsPath.php',
  success: function(data){        
    var old = $("#progressbar").progressbar("value");
    $("#progressbar").progressbar("value", old+10)
  }
});

// buildClassification.php
$.ajax({
  url: 'batch/buildClassification.php',
  success: function(data){        
    var old = $("#progressbar").progressbar("value");
    $("#progressbar").progressbar("value", old+10)
  }
});

Your two php files could look like this:

buildFacetesPath.php

<?php
/*
 * script for releasing classification
 */

require_once(dirname(__FILE__) . "/../config.php");
require_once(TU_CLA_LIB . "/Database.php");

/* database */

$error = "";
$aDb = new Database();
if ($aDb->error) {
    print $aDb->error;
    exit;
}

/* build pathFacetsInfo for facets */

$res = $aDb->buildFacetsPath();
if (!$res) {
    print $aDb->error;
    exit;
}

?>

buildClassification.php

<?php
/*
 * script for releasing classification
 */

require_once(dirname(__FILE__) . "/../config.php");
require_once(TU_CLA_LIB . "/Database.php");

/* database */

$error = "";
$aDb = new Database();
if ($aDb->error) {
    print $aDb->error;
    exit;
}

/* build classification */
$res = $aDb->buildClassification();
if (!$res) {
    print $aDb->error;
    exit;   
}

print "release succeed.\n";

?>

Display percentage value of progress bar during AJAX upload

You just need to also set the text() of the progress bar too:

xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        var percentage = (e.loaded / e.total) * 100;
        $('div.progress-bar').css('width', percentage + '%').text(percentage + '%');
    }
};

---

Related Topics