Showing progressbar with ajax request

Question

I want to show the progress with the jquery ui progress bar when the ajax request is launched and when it ends. The problem is that I don’t know how to set the values ​​for the progress bar depending on the progress of the ajax request. Here is the code to start:

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 main problem is that you do not know how long the request will take.

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

If you do not want the progress bar to simply go from 0 to 100, you need to somehow measure the completion rate before the request completes.

If you can guess how long it will take, you can use a timer so that it gradually increases, say, by 90%, automatically, and when the server response arrives, set it to 100%. Of course, this pretends to be quite a bit.

If you have multiple requests, you can use the percentage of completed requests. If this makes sense, you can split one request into several, but think carefully about how it affects network traffic and response time. Don't just do it for the progress bar.

If the request really takes a lot of time, you can run additional requests to the server to find out about the progress. But that can mean a lot of server side work.

Sorry, but performance is difficult ...

Answer 2

I faced this situation in our own application. This was an important application, and we needed to show the progress to the user. Thus, despite the fact that @Thilo mentioned network traffic, we had to implement it so that the user could be informed about the completion of a long process and how it progressed over time.

We broke it into small pieces.

• Create a thread on the server code to start a specific process. For ASP.Net, it was like this:

  System.Threading.ThreadPool.QueueUserWorkItem(AddressOf MyProcessRoutine, objectParameter)

• Inside this "MyProcessRoutine" run your long-term code and update the static variable for the counter or save it in the database for every step that you want to track.

• Create another function that checks this counter and returns the current value. For example: Public Shared Function CheckStatus() As Integer

• From your client code, continue to poll this routine every 5 seconds (depending on how much network traffic you can afford and how much accuracy you want. For example: timer = setInterval("MyWebService.CheckStatus();", 500);

• In your client code, use this return value (counter) to update the progress bar.

In addition to the counter, you can also return an object containing relevant data, such as a record identifier, to show the user where the process is located.

Make sure that you handle the stream very carefully, handle all possible exceptions, and have the correct cleanup.

Answer 3

I do not use jquery, but this may help you.

This is an animated Ajax progress bar with Fake Fallback.

I just pass the fake size knowing the average size of my scripts

therefore, if my scripts are around 50-100 KB, I set the fake size to 150 KB.

if the calculated length is not available, I use a fake size.

In this script, I added an additional check that the size of the bar is always smaller than the container.

just by multiplying the fake size * 2 .. if its smaller than the downloaded data.

to make everything look good, I also added the css3 transition effect so that it delays 700 ms.

this animation delay adds everything you need to make the progress bar real.

copy and paste into the html file and check using a modern browser such as chrome.

replace YOURSITE with ajax content site ... or something else.

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Ajax Progress</title> <style> #progress{ width:300px; height:20px; border:1px solid rgba(0,0,0,0.5); } #bar{ width:0%; height:20px; background-color:green; -webkit-transition:width 700ms ease; } </style> <script> var pb, fakeSize=100000,//~100kb progress=function(e){ fakeSize=(e.loaded>fakeSize?(fakeSize*2):fakeSize);//Bonus var tot=(e.lengthComputable?e.total:fakeSize); pb.style.width=(100/tot*e.loaded)+'%'; }, onloaded=function(e){ pb.style.width='100%'; }, ajax=function(a,c){ c=new XMLHttpRequest; c.open('GET',a); c.onprogress=progress; c.onload=onloaded; c.send() }; window.onload=function(){ pb=document.getElementById('bar'); ajax('YOURSITE'); } </script> </head> <body> <div id="progress"><div id="bar"></div></div> </body> </html> 

you just need to use the progress function in jquery and then set the column to 100% when loading the script.

Answer 4

Edit: for posterity, I left my previous answer below, but, seeing how it really does not answer the asked question, I provide a new answer.

Some of the comments on this point point to newer methods for achieving this. Thanks to HTML5 and the new XHR2, you can put callbacks on the course of AJAX requests. This includes adding event listeners to the XHR object and providing callbacks for the corresponding properties. This page has good download and download examples, and this git repo looks good and has recently been updated.

Also, if you are really interested in digging in XHR and overrides, this post in Mozilla doc should also help, And in fact, this doc post is similar to what I mentioned the git repo I was talking about.

Old answer: This is an old problem for people who write web applications, and Tilo is right, it is not as difficult as it once was. The best solution (imo) is to “cut out” the downloaded files and update the progress bar every time you download a piece. This SO question and its answer is a good place to start understanding this concept and even how to apply it to your situation.

But suffice it to say what you will do is take the file you are loading and split it into smaller parts on the client side. There are several potential advantages to this, but in this case, the main one is that it allows you to know every time a certain percentage of the file is uploaded to the server. And, obviously, every time you unload a piece, you can update the progress bar accordingly.

Blocking a file like this also allows you to effectively “pause” or “resume” the download, since you can download different parts of the file at any given time.

Answer 5

This should be possible with server side events.