Using <CFFLUSH> for better page loading
I've found cf flush to be useful when you are serving up long tabular report data. If you are going to output several hundred rows, cfflush can help a lot. One approach I've used that works great for intranet sites where the browser is a known item is a combination of a status bar, javascript and cfflush. I create a flash movie that has a status bar with frames from 1 to 100 (1 being an "empty" bar and 100 being "filled") based on a variable I can set using the "SetVariable( )" function in Javascript. Then, as I'm outputting data I increment that variable using cfflush and javascript.
For example, using MOD 100 (or whatever threshold makessense to you) and currrent row I could run a calculation that gives me the percent commplete of the output. let's say 13 percent at row 200. Then, I would write this: ( <script> movie.SetVariable(13,"13%"); </script >) .. the first item is the frame number I want the movie to go to and stop, the second variable is a label. I use <CFFLUSH> to send it to the html page where it is run "inline" immediately. The result is a nice looking status bar that climbs incrementally at the top of the report and lets the user know that data is being sent to the browser and to please be patient. This approach can be useful for things like data upload tools where user uploads a spreadsheet or database that is subsequently inserted into a table or appended to a file.
For source files click here.
The example below loops through a query and updates the movie based on flushing 10 rows at a time.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
..... id="movie" name="movie">
<param name="movie" value="progress3.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
</object>
<script> var movie = window.document.movie; </script>
<!--- flush the initial inline declaration of "movie" --->
<cfflush>
<!--- loop through the results of a query --->
<cfoutput query="rs_Company">
<table>
<tr>
<td>
<b>Company: </b>#cname#
</td>
</tr>
<!--- if the current row IS divisible by 10 (not MOD 10)
then flush an inline percent "setter" --->
<Cfif NOT Currentrow MOD 10>
<cfset Percent = ROUND((CurrentRow / RecordCount) * 100)>
<SCRIPT>
movie.SetVariable("percentProgress", "#Percent#%");
movie.GotoFrame(#Percent#);
</SCRIPT>
<!--- Flush the inline javascript --->
<cfflush>
</CFIF>
</cfoutput>
</table>
5 Comments
-
Amir - I have it running in production on a CF 5 server and I know it works using IE. The application in question is older and It's an older post. I haven't tested it on a CFMX server. The trick is that the browser has to execute the code AS SOON as it receives the input buffer. That way it executes the little script block over and over again over a long running request.
If your browser is "waiting" (as some netscape browsers do for example) for the whole buffer - or you have nested tables and it's waiting for the last /table tag etc... then it may not give you the results you desire.
I use it for productivity tools like long running reports - where the user base is pretty well defined. Using it on a public site were you have to support many browsers types might not give you a great result. -
I tried it and it was great! unfortunately it doesn't work in Firefox browser -
@Mega,
To use in FF you would need to alter the syntax of the object code to include the "embed" tag.
FYI - this is pretty ancient solution these days. i'm sure there are some new ones out there.
Sites to Watch
Aggregators
RSS
