Reputation: 283
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?
Upvotes: 1
Views: 4066
Reputation: 28893
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.
Upvotes: 1
Reputation: 4205
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))});
}
Upvotes: 1