Question

I’m trying to make a progress bar that updates the user on the progress of the AJAX call.

My immediate thinking was that I need an AJAX call to start a thread on the server, allowing the starting AJAX call to finish, and allowing the thread to send updates back to the user.

For the purpose of simplicity, disregard the actual progress bar functionality (I was thinking of implementing one of those JS bars, with fancy colors and effects ;), but if I can get an update from the thread, then updating a simple JS progress bar becomes trivial 😉 )

I just need a few pointers on how to accomplish this, if anyone could oblige me? 😉

Answer 1

Crux of the problem is to get the % of work completed from the server. The only way out is to poll the server every x seconds. There are couple of approaches,

1. Initiate a httphandler(sync or async) call with ajax.
2. [Polling] Use ASP.NET timer control to refresh the update panel every x seconds.

OR

http://encosia.com/2007/07/25/display-data-updates-in-real-time-with-ajax/

OR use jquery for polling.

Poll the server at ‘t’ interval and get the status. For that we need to call a function at ‘t’ interval that would initiate an AJAX call to a HTTPHandler to get the status.

$(function() { 
  setInterval(update, 't'); 
}); 

function updateStatus() { 
  $.ajax({ type: "POST",  url: "GetStatusHandler.ashx", 
       contentType: "text/html; charset=utf-8", 
       dataType: "html",   
       success: function(data) { UpdateStatus - Update some progressbar plugin } 
       }); 
} 

So you will have two httphandlers, one to start the process other to get the status.

You can research on these and see what suits you better.