Question

144

showing progressbar progress with ajax request

rated 0 times [ 150] [ 6] / answers: 1 / hits: 28469 / 14 Years ago, fri, march 19, 2010, 12:00:00

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();

   }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

devinjadong

Add To Favorites

Follow

Total Points: 711

Total Questions: 117

Total Answers: 100

Location: Andorra

Member since Sat, May 27, 2023

1 Year ago

devinjadong questions

1 How to make an existing React app installable (PWA)?

Thu, Feb 17, 22, 00:00, 2 Years ago

1 clarity.js by Microsoft slowing overall page loads

Wed, Dec 8, 21, 00:00, 2 Years ago

1 How to use document.querySelector and require with node.js and SQLite3

Sun, Aug 29, 21, 00:00, 3 Years ago

1 Object(...) is not a function for Vuex Store

Tue, Oct 27, 20, 00:00, 4 Years ago

1 How to use heatmap written in javascript in react js

Fri, Oct 18, 19, 00:00, 5 Years ago

View All

answered 14 Years ago kamryn · Accepted Answer

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...