Using a progress bar to load a time-consuming script asynchronously

Question

Hey guys,

I'm loading a dynamic application (which takes 20-30 seconds), and I'm trying to create a dynamic progress bar that shows the user how much of the task has been completed dynamically as the page loads.

I'm accomplishing this by setting buffer to false and having my script output a line of JavaScript as it progresses that calls a function to increment the scrollbar:

function progress(percent)
{
  $("#progressbar").progressbar({value: Math.round((percent*100))});
}

This is called by a simple function call like progress(15) generated by my page and sent realtime to the browser. Someone suggested on another thread that I could optimize this by attaching the progressbar to a .load() AJAX call, but as far as I know this ONLY returns once the whole page is loaded. Is there any way for me to use some type of asynchronous call to execute the time-consuming code and still be able to display realtime progress as it executes?

Answer 1

You'll need something like a ticketing system. When the client requests this time consuming operation, they are given a ticket-id.

Now they can poll the server for updates; and this can be served by a process/script different from the one actually handling the request. I'll update this answer if you add more details to the question.