Jquery:: Ajax powered progress bar?

Question

I have a page which uses jquery\'s ajax functions to send some messages.

There could be upwards of 50k messages to send.

This can take some time obviously.

Answer 1

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.