Question

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)
{
 $(function() {
  $("#progressbar").progressbar({value: Math.round((percent*100))});
 });
}

This is called by s simple function call like progress(15) generated by my page and sent realtime to the browser. A simple bar I made with css worked perfectly, but now that I’m trying to use jQuery it seems my progress bar is being incremented correctly but it won;t show up on the page until the page is done loading or the “stop” button is pressed. Any ideas why this is?

Answer 1

you’re using the shorthand equivalent of the ‘document.ready’ notation $(function(){}); which only fires after the dom is loaded

if your function wasn’t wrapped with that you’d be all set

i.e.


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