Question

I want to show progress with jquery ui progress bar when an ajax request fires and when it finishes. The problem is I don’t know how to set values for the progress bar depending on the progress of the ajax request. Here’s a code to start with:

function ajaxnews()
    {
        $('.newstabs a').click(function(e){
            var section = $(this).attr('id');
            var url = base + 'news/section/' + section;

            $.ajax({
                url : url,
                dataTye : 'html',
                start : loadNews,
                success : fillNews
            });
        });
    }



// start callback functions
   function loadNews()
   {

       $('#progressbar').fadeIn();
       $('#progressbar').progressbar({ //how shoud I set the values here});
   }

   function fillNews()
   {
    $('#progressbar').progressbar('option', 'value', ?? /* how do I find this?*/);   
    $('#progressbar').fadeOut();
   }

Answer 1

The fundamental problem is that you do not know how long the request is going to take.

For the progress bar, you need to set a percentage, or a number of completed steps.

If you do not want the progress bar to just jump from 0 to 100, you need to have some way to measure the completion rate before the request is finished.

If you can guess how long it takes, you could use a timer to have it incrementally advance to, say, 90%, automatically, and when the server response comes it, set it to 100%. Of course, that is faking it quite a bit.

If you have more than one request, you could use the number of completed requests as a percentage. If it makes sense, you could break down your single request into multiple, but carefully think about the impact this has on network traffic and response times. Don’t just do it for the sake of the progress bar.

If the request really takes long, you could fire off additional requests to the server to inquire the progress. But that could mean a lot of work server-side.

Sorry, but progress bars are hard…