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.

What I am looking to do is show a progress bar with the messages being sent.

The backend is PHP.

How can I do this?

---

My solution:
Send through a unique identifier in the original ajax call.
This identifier is stored in a database(or a file named with the identifier etc), along with the completion percentage.

This is updated as the original script proceeds.

a function is setup called progress(ident)

The function makes an ajax call to a script that reads the percentage.
the progressbar is updated
If the returned percentage is not 100,
the function sets a timeout that calls itself after 1 second.

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.