CFProgressBar not working with CFFlush
I am having a difficult time trying to get my CFProgressBar to appear on the screen before the page completes. I must be doing something wrong, but I am able to get plain old JavaScript (using innerHtml text) to appear and update through my loop, but when I replace my innerHtml code with the CFProgressBar text, Firebug tells me that the progress bar cannot be found.
Can anyone shed some light on this for me?
Here is working code with innerHtml:
<p id="loading">Starting....</p>
<CFFLUSH>
<CFLOOP FROM="1" TO="50" index="i">
<SCRIPT LANGUAGE="JavaScript">
document.getElementById('loading').innerHTML = '<CFOUTPUT>#i# out of 50 complete</CFOUTPUT>';
</SCRIPT>
<CFFLUSH>
</CFLOOP>
Here is the Progress bar code that does not work:
<head>
<script>
function showBar()
{
ColdFusion.ProgressBar.show( "cbsProgressBar" );
ColdFusion.ProgressBar.start( "cbsProgressBar" );
}
</script>
</head>
<p id="progressBar">
<cfprogressbar name="cbsProgressBar" autoDisplay="true" width="200" duration="1000" >
</p>
<CFFLUSH>
<SCRIPT>
showBar(); <!--- this gives an error b/c it doesn't see the progress bar ... WHY???? --->
</SCRIPT>
<CFFLUSH>
<CFLOOP FROM="1" TO="50" index="i">
<SCRIPT LANGUAGE="JavaScript">
ColdFusion.ProgressBar.updateStatus("cbsProgressBar","Updating...",<CFOUTPUT>#i#</CFOUTPUT>/50);
</SCRIPT>
<CFFLUSH>
</CFLOOP>
AdChoices