php - 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.

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

Check this if you use jQuery: http://docs.jquery.com/UI/Progressbar

You can just supply the value of the bar on every AJAX success.

Otherwise, if you don't use JS Framework see this: http://www.redips.net/javascript/ajax-progress-bar/

I don't have a way to test it, but it should go like this:

    var current = 0;
    var total = 0;
    var total_emails = <?php $total_emails ;?>; 

    $.ajax({

      ...
      success: function(data) {
        current++; // Add one to the current number of processed emails
        total = (current/total_emails)*100; // Get the percent of the processed emails
        $("#progressbar").progressbar("value", total); // Add the new value to the progress bar
      }
    });

And make sure that you'll include jQuery along with jQueryUI, and then to add the #progressbar container somewhere on the page.

I may have some errors though ... You will probably have to round the total, especially if you have a lot of emails.