Question

I have a jQuery ui progressbar

var item = 4;

$('<div/>', { id: 'progressBar' + item, 'class': 'ui-widget-default flpb' }).appendTo($('#test'));
$('#progressBar' + item).progressbar({ value: 0 });

here the progressbar shows up on the page

then I do a ajax call like this

$.getJSON("http://" + jsonServiceUrl + "/data/for/" + item + "/from/" + $('#dtStart').val() + "/to/" + $('#dtEnd').val() + "?callback=?", 
   function (results) {
       var pbScale = 100 / results.count,
           startTime = new Date().getTime();

       $.each(result, function (r, result) {
           //here the progress bar doesn't update.
           $('<div/>', { html: " Date: " + new Date(parseInt(result.TimeOfMeasurement.substr(6))) }).appendTo('#test');
           $('#progressBar' + item).progressbar('value', r * pbScale);
       });
       console.debug('elapsed milisecs: ' + new Date().getTime() - startTime;
   });

The progressbar gets updates to “100%” after the callback function finishes.

EDIT:

I’m not trying to get the progress of my json call, I’m trying to get the progress of looping through the collection of things I get back from the server. Next to updating the progress bar I also draw a div for every item in the collection. There are upto 200 items in the collection so there is progress enough to be shown.

Next to the progress bar not updating, the newly generated divs also don’t show up until the callback function finishes.

I added the timer and the processing time is about 1000 miliseconds (which must be enough to update the progressbar a couple items).

Answer 1

$.each is a synchronous call, which is equivalent to a for(;;;) loop. The iteration over your results is instantaneous, and whilst the progressbar will be updating in the background, it’s too quick for you to notice.

You want to be showing the progress of your AJAX request, not your progress of iterating over the result set. Furthermore, because the $.each is synchronous, if it ever becomes large enough to warrant a progressbar for it, you’ll have bigger problems to worry about; such as the unresponsiveness of your application until the iteration completes, than showing a progress bar.