CODEWITHSUNDEEP
jqueryajaxloadprogress-bar
Frederik Brinck Jensen
Frederik Brinck Jensen

Reputation: 523

jQuery: tracking load request progress

I've been looking for a way to track the amount of data loaded in a jQuery .load() request. What I want is a bar that expands when the amount of loaded data increases – a progress bar. And this progress bar should listen to the .load() request.

Throughout my 2 hours of research, I've been as far as looking upon long-time pooling, JSON, etc. But I can't figure out if I'm on the right track or not.

How do I make a progress bar listen to a jQuery .load() request and increase proportionally with the amount of loaded data?

Upvotes: 2

Views: 3855

Answers (2)

profuel
profuel

Reputation: 127

When we had such a task to track status of long ajax process.
What we have - is request to another page counting actual data stored or processed on server, responding with value in percent to complete. So

var stillLoading = true;
$.get('long-process-url', function(data){
    stillLoading = false;
    //code on success
});

checkStatus()    

function checkStatus() {
    if(stillLoading) {
        setTimeout(function(){
            $.get('get-stats-of-process-url', function(data){
                $('#percent').val(data);
                checkStatus();
            }
        }, 1000);
     }
}

Upvotes: 0

Jasper
Jasper

Reputation: 75993

You can break your .load() call into several smaller AJAX requests and at the completion of each request, update the progress bar and start the next AJAX request. There is no event you can bind to like ajax-progress, the server response is sent "all-at-once" and the success callback function of the AJAX request is called once all of the response has been received by the browser.

$(function () {
    var total    = 5,
        current  = 1,
        response = [];
    function do_ajax() {
        $.ajax({
            url : 'server-side.php?page=' + current
            success : function (serverResponse) {
                response[response.length] = serverResponse;
                $('#progress-bar').text(current + ' of ' + total + ' are done');
                current++;
                if (current <= total) {
                    do_ajax();
                }
            }
        });
    }
});

Upvotes: 4

Related Questions