jquery progressbar ajax,php - Jquery:: Ajax powered progress bar? - Stack Overflow

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.