Sunday, September 14, 2008

processing page, please wait", made easy! in cf

<!--- First thing we need to do is layout a form that will contain our 'processing' page --->
<body bgcolor="#514a4d" topmargin="60" leftmargin="10">
<form name="process">
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF" vspace="0">
<TR>
<TD colspan="2" align="center">
<div id="Processing" style="visibility:visible;">
<h2>Report Processing, please wait...</h2>
</div>
</TD>
</TR>
<TR>
<TD align="center">
<input name="Status"
value="Processing Status:"
width="25"
maxlength="25"
style="border:0px; background-color:##FFFFFF;">
</TD>
<TD>
<input name="Percent" width="8" maxlength="8" style="border:0px; background-color:##FFFFFF " value="">
</TD>
</TR>
<TR>
<TD colspan="2">
<div id="Complete" style="visibility:hidden; position:relative; ">
<center>
Your report is complete!.
</center>
</div>
</TD>
</TR>
</table>
</form>
<cfflush>

<!--- Create a 'CurrentPercent' variable --->
<cfparam name="CurrentPercent" type="string" default="">

<!--- Here we would normally do a query, but I am going loop through a list for an example --->
<cfloop from="1" to="10" step="1" index="i">

<cfoutput>
<cfset CurrentPercent = '#i * 10#'>
<script>
document.process.Percent.value = #CurrentPercent# + '%';
</script>
<cfflush>
</cfoutput>

<!--- Include your processing here, or use a cfinclude like I did --->
<!--- In this case, I will put a 1 second pause here --->
<CFSET StartWait = Now()>
<CFLOOP condition="DateDiff('s', Variables.StartWait, now()) lt 1">
</CFLOOP>

<!--- Check if we are at 100 percent --->
<cfif CurrentPercent eq 100>
<script>
document.process.Percent.value = 'Complete';
</script>
</cfif>

</cfloop>

<!--- Make the 'processing page' text disappear --->
<script>
document.getElementById('Processing').style.visibility = 'hidden';
</script>

No comments: