Adding Animation While Waiting

[Guest]

Have a number of CF form pages, which users fill out (formpage.cfm).  These call the actionpage.cfm, which displays the report.

Would like to add animation while the user is waiting for their reports.  Not exactly sure how best to do this with CF9.  Don't use/implement Ajax, but could learn.  If there are other ways, such as java-script, etc., just need to know the best placement for the script (does it go in the formpage or the actionpage .CFM file?, etc.).

Just need to see a few examples of how others have implemented this in the past.  If anyone has some pointers, or sample code to share, that would be most appreciated.  Thank you.

Gary

[Dan_Bracuk]

cfprogressbar

[Guest]

Dan, you're still writing CF code?  Good for you.  Thanks for the tip.  We recently cut-over to CF9 from CF7, and wasn't aware of this tag.  It's not the easiet tag to implement.  I tried it, without success.  Followed all the instructions in Adobe's CF9 Reference Guide.   Am trying to use it in a "formpage" to "actionpage" scenario.  I have not used Ajax code before, and that could be my problem.

I have a normal CFFORM template where users make their selections, then click SUBMIT.  That template (mypgm_formpage.cfm) calls (mypgm_actionpage.cfm) which invokes the CFC to run the query, and displays the output. 

Per instructions, put all the scripts in the right places, changed my application.cfm file to show "sessionmanagement = yes" (don't have an application.cfc as the instructions indicate).  On my formpage, I added onClick=startProgress() to the end of this line, so it looks like this <INPUT type="submit" name="Submit" value="Submit" onClick=startProgress()>.  Then added the <CFPROGRESSBAR tag, per instructions, below that.

However, when I display the formpage, everything below the SUBMIT button disappears from the page, including all my instructions, notes, etc. 

I created a CFC to hold the the GETSTATUS function.  The instructions didn't say whether to INVOKE the CFC in the application page, as i normally do with CFCs.  So I tried both WITH and WITHOUT invoking the GETSTATUS CFC.  No difference. 

In any case, I tried clicking the SUBMIT button, and got the little yellow "java script error" message.  The program ran, and my report was displayed.  But there was no progress bar.  I must be doing something wrong, or perhaps there is some other AJAX code that is required, not mentioned in Adobe's CFPROGRESBAR instructions. 

If any thoughts, I would greatly appreciate it.  In mean time, will take a few AJAX tutorials, and see what I can learn.  Thanks again,

Gary

[Dan_Bracuk]

I've never tried to implement it either as we have also recently upgraded from cf7 to 9.  Another way would be something like this:

<div id="something">

image

</div>

<cfflush>

code that takes awhile

<cfsavecontent>

code to produce display

<cfsavecontent>

<script>

js code to replace contents of div