JQuery UI progress bar not showing up until page loads fully

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)
{
 $(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

Are you wrapping it in the $(document).ready( callback? If so that's the issue. $(document).ready won't run until the DOM has been loaded.

It could also be that if the page is loading it hasn't run the JS yet, or the #progressbar wasn't found in the DOM. This could be because you're calling the function before the #progressbar div is written.

Correct:

<div id="progressbar"></div>
<script type="text/javascript">/* Function call */</script>

Incorrect:

<script type="text/javascript">/* Function call */</script>
<div id="progressbar"></div>

I recommend making the page template (headers, footers, etc, everything that doesn't require a lot of server side processing) and then putting in the progressbar attached to a $.load AJAX call.

Answer 2

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