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.

Answer 2

Use this answered question

this is how i implemented it:

    var progressTrigger;
    var progressElem = $('span#progressCounter');
    var resultsElem = $('span#results');
    var recordCount = 0;

    $.ajax({
        type: "POST",
        url: "Granules.asmx/Search",
        data: "{wtk: '" + wkt + "', insideOnly: '" + properties.insideOnly + "', satellites: '" + satIds + "', startDate: '" + strDateFrom + "', endDate: '" + strDateTo + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "xml",
        success: function (xml) {
            Map.LoadKML(xml);
        },
        beforeSend: function (thisXHR) {
            progressElem.html(" Waiting for response from server ...");
            ResultsWindow.LoadingStart();

            progressTrigger = setInterval(function () {
                if (thisXHR.readyState > 2) {
                    var totalBytes = thisXHR.getResponseHeader('Content-length');
                    var dlBytes = thisXHR.responseText.length;
                    (totalBytes > 0) ? progressElem.html("Downloading: " + Math.round((dlBytes / totalBytes) * 100) + "%") : "Downloading: " + progressElem.html(Math.round(dlBytes / 1024) + "K");
                }
            }, 200);


        },
        complete: function () {
            clearInterval(progressTrigger);
            progressElem.html("");
            resultsElem.html(recordCount);
            ResultsWindow.LoadingEnd();
        },
        failure: function (msg) {
            var message = new ControlPanel.Message("<p>There was an error on search.</p><p>" + msg + "</p>", ControlPanel.Message.Type.ERROR);
        }
    });

Answer 3

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.