Mar
10

OnLoad event in ColdFusion Flash Forms Part I

20 comments Posted by: Nahuel

One of the missing features in Flash Forms is the onLoad event. I'm not sure why they left it out since the attribute works for xforms and regular html forms, in which case the tag expects a piece of JavaScript code. It would make sense to expect a piece of ActionScript code for Flash forms.

In any case, because this event would come in handy in several scenarios, I made a workaround while we wait for a real onLoad event from Macromedia ( crossing fingers here).

You can view a working example that fires an alert when the form is loaded.
The code looks like this:

<cfsavecontent variable="onLoad">
   alert("An Alert generated with the onLoad Event ",'Your on load Event',mx.controls.Alert.OK);
   label1.setFocus();
</cfsavecontent>
<cfsavecontent variable="binding">
   <!--- Note: this could be written in the folowing form:
   {trigger.dispatchEvent({type:'change'})}
   But the event would get fired twice. To avoid this behavior, I just added a little logic to the code.
   You can use whatever you want depending on your flow of events. --->

   {(trigger.text != '') ? trigger.dispatchEvent({type:'change'}) : 'init'}
</cfsavecontent>

<cfform name="myform" format="flash" height="200" width="400">
   <cfformgroup type="hbox">
      <cfinput type="text" name="label1" value="label1" >
      <!--- I made the "trigger" input invisible with width and height equal to 0 because it can not be hidden--->
      <cfinput type="text" visible="false" height='0' width="0" name="trigger" value="init" onchange="#onLoad#" bind="#binding#">
   </cfformgroup>
</cfform>

I used a dummy cfinput (named "trigger ") to fire the event that allows having a simple onLoad event. However, this implementation has some limitations that I will address in the next post in order to keep this example simple.


Limitations to be aware of:

  • The "trigger" input has to be placed after all the other controls if we want to access any of them from the onLoad event
  • It does not have access to any value of the controls. This is due to the onLoad event getting fired before any value is set.
View the example
Download the source

Update: This hack is no longer needed after ColdFusion updater 7.01

Category: CFForm | ColdFusion |

20 Comments so far

Write yours
pim
Thanks for sharing. I use it to init features that are sometimes missing in the cfm/swf bridge.
I had found on a forum the following trick that was doing the onLoad event:
&lt;cfformgroup type=&quot;ACCORDION&quot; id=&quot;myAccordian&quot; onchange=&quot;#onLoad#&quot;&gt;
   &lt;cfformgroup type=&quot;PAGE&quot; /&gt;
&lt;/cfformgroup&gt;
Derek
2. Derek wrote on April 13, 2005 at 9:36 PM
This seems to not work if the from is encapsulated within a tabnavigator...any ideas around this?
Laura
Hi Derek,
Is the alert not working for you or you are trying to do something else on your onload? Maybe you can post a simplified code so we can see what the problem might be.
Steve Moore
4. Steve Moore wrote on April 14, 2005 at 10:31 AM
This doesn't seem to work if you leave out the alert box. The input field gets highlighted, but typing on the keyboard does nothing. You still must click in it to enter content.
Derek Perez
5. Derek Perez wrote on April 19, 2005 at 10:25 PM
I am having the same problem that Steve Moore is having. how can we fix this?
Nahuel
Hi Steve and Derek,
Sorry for answering late.
Regarding your question, the setFocus works, the problem is that the flash form is not focused. You can do that with javascript when the page loads.
Steve Moore
7. Steve Moore wrote on June 02, 2005 at 9:54 AM
What would be the exact javascript code to do this? In viewing source of the output page, I'm not seeing an ID or NAME value to identify. I've tried &lt;body onload=&quot;document.getElementById(frmEntry).focus()&quot;&gt;, where frmEntry is my cfform name. But this name in undefined. Thanks.
Jordan Clark
8. Jordan Clark wrote on June 22, 2005 at 2:28 PM
I threw your onload idea into a simple custom tag cf_formonload, you can pass in the onload code as an attribute, or wrap the tag around it:

&lt;cf_formonload&gt;
   alert(&quot;An Alert generated with the onLoad Event &quot;,'Your on load Event',mx.controls.Alert.OK);
&lt;/cf_formonload&gt;

Here is the Custom tag code:


&lt;cfif NOT isDefined( &quot;thisTag.executionMode&quot; )&gt;
   &lt;cfthrow type=&quot;Custom.Tag.ExecutionMode&quot; message=&quot;CF_FORMONLOAD must be called as a custom tag.&quot;&gt;
&lt;cfelseif thisTag.executionMode IS &quot;start&quot; AND thisTag.hasEndTag IS true&gt;
   &lt;cfexit method=&quot;exitTemplate&quot;&gt;
&lt;/cfif&gt;

&lt;cfparam name=&quot;attributes.field&quot; type=&quot;variableName&quot; default=&quot;trigger&quot;&gt;
&lt;cfparam name=&quot;attributes.content&quot; type=&quot;string&quot; default=&quot;#thisTag.generatedContent#&quot;&gt;

&lt;cfinput
   type=&quot;text&quot; name=&quot;#attributes.field#&quot;
   visible=&quot;false&quot; height=&quot;0&quot; width=&quot;0&quot;
   onChange=&quot;#attributes.content#&quot;
   bind=&quot;{(trigger.text != '') ? trigger.dispatchEvent({type:'change'}) : 'init'}&quot;
&gt;
Prem
9. Prem wrote on July 17, 2005 at 9:51 AM
Anyone found a solution without using the alert? or how to focus on the flash movie ?

Ive been beating my head over this for a while

petruc
10. petruc wrote on July 19, 2005 at 1:25 PM
Is there a way to manipulate the &quot;range&quot; attribute on an event in a cfform?

I have 2 radio buttons, and a text field. If I check the first radio button, I would like the range on the text field to be 0-400. If the second radio button is checked, I would like the range on the text field to be 0-800.

Any ideas?
Nahuel
Hi Petruc:
You can do that by changing the maxChars
Here are the docs:
http://livedocs.macromedia.com/flash/mx2004/main_7_2/00002864.html
Frank Grimes
12. Frank Grimes wrote on August 27, 2005 at 8:36 PM
Anyone figure out how to set focus on the flash form that is generated? I have tried many variations of these general approaches:

- document.getElementById(flashForm);
- document.flashForm.focus();

I think that the problem may be because the output does not have the &quot;embed&quot; tag. Any ideas?
Chris
13. Chris wrote on October 12, 2005 at 5:20 AM
Frank--

I was able to focus on the Flash form by setting the NAME attribute in the CFFORM tag and then using a JavaScript onLoad event handler in the BODY tag like this:

&lt;body onLoad=&quot;document.myform.focus();&quot;&gt;

&lt;cfform name=&quot;myform&quot; ...&gt;
&lt;/cfform&gt;
Chris
14. Chris wrote on October 12, 2005 at 5:27 AM
D'oh! The above does NOT appear to work in Firefox. Should've tested better...
daniel fredereicks
Anyone found a solution without using the alert? or how to focus on the flash movie ?

---
did anyone find the answer to focus on a flash movie? did anyone get a flash swf file to display in a flash form...with flash remoting?

please help :)
Boybles Maldooney
16. Boybles Maldooney wrote on July 28, 2006 at 11:43 PM
How do you focus on a certain page on a tabnavigator? Say I want to focus on the third tab on loading?
Laura
Boybles,
The tabnavigator has the property "selectedIndex" that can be used to show a specific tab (it starts at 0)
Prabhu Thomas
18. Prabhu Thomas wrote on November 30, 2006 at 4:29 AM
hi,

is it possible to have two dispatchEvents in a single function because i'm having a peculiar problem.
i have two grids for which data is populated from a query.

when the page loads, i need to select the first row in both the grids. this part works fine. when the row is selected, the change event is not fired for the grids. so i have added a dispatchEvent for each of the grids. but the problem here is only the second dispatchEvent gets fired. if i comment out the second one, then the first gets fired. i need to send two dispatchEvents

i have attached the code i'm using.

      function formOnLoad(CourseDivisionId){
         var gItem;
         var listenerGB:Object={};
var GBgrdGradeBook:mx.controls.DataGrid=GBgrdGradeBook;
         var listenerET:Object={};
var GBgrdEventType:mx.controls.DataGrid=GBgrdEventType;
         
_root.txtCourseDivisionId.text=CourseDivisionId;
         // Set a listener for the first grid (Student Details) to see if the data has arrived.
         // If data has arrived, then select the first row and dispatch a CHANGE event (since the onChange event is not fired when the row is selected)
         listenerGB.modelChanged=function(evt):Void {
GBgrdGradeBook.removeEventListener('modelChanged', listenerGB);
if(GBgrdGradeBook.dataProvider.length){
GBgrdGradeBook.selectedIndex=0;
                  gItem=GBgrdGradeBook.getItemAt(0);
                  GBgrdGradeBook.dispatchEvent({type:'change'});
}
}
GBgrdGradeBook.addEventListener('modelChanged', listenerGB);

         // Set a listener for the third grid (Event Types) to see if the data has arrived.
         // If data has arrived, then select the first row and dispatch a CHANGE event (since the onChange event is not fired when the row is selected)
         listenerET.modelChanged=function(evt):Void {
GBgrdEventType.removeEventListener('modelChanged', listenerET);
if(GBgrdEventType.dataProvider.length){
GBgrdEventType.selectedIndex=0;
                  GBgrdEventType.dispatchEvent({type:'change'});
}
}
GBgrdEventType.addEventListener('modelChanged', listenerET);
      }
Prabhu Thomas
19. Prabhu Thomas wrote on November 30, 2006 at 9:56 PM
hi,

jus checked in firefox. both the dispatchEvents are working in firefox. its only IE thats giving me a problem.
Escroto
20. Escroto wrote on April 30, 2008 at 3:37 AM
You are a God, this site rocks!!!

Leave your comment

Comment etiquette: As a gesture to those subscribed to this post, please keep your comments relevant to the post.

Your email address will never be displayed.
Email is gravatar enabled.Gravatar are the pictures you see next to the comments. If you like to have one, visit gravatar



Allowed tags:

<code>
All other tags will be shown as such, when in doubt, use the preview.




Preview:

Refresh Preview
1. You wrote on