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

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("
There was an error on search.
" + msg + "
", ControlPanel.Message.Type.ERROR);
        }
    });