OnLoad event in ColdFusion Flash Forms Part I
20 comments Posted by: NahuelOne 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.
Download the source
Update: This hack is no longer needed after ColdFusion updater 7.01
Category: CFForm | ColdFusion |
20 Comments so far
Write yoursI had found on a forum the following trick that was doing the onLoad event:
<cfformgroup type="ACCORDION" id="myAccordian" onchange="#onLoad#">
<cfformgroup type="PAGE" />
</cfformgroup>
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.
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.
<cf_formonload>
alert("An Alert generated with the onLoad Event ",'Your on load Event',mx.controls.Alert.OK);
</cf_formonload>
Here is the Custom tag code:
<cfif NOT isDefined( "thisTag.executionMode" )>
<cfthrow type="Custom.Tag.ExecutionMode" message="CF_FORMONLOAD must be called as a custom tag.">
<cfelseif thisTag.executionMode IS "start" AND thisTag.hasEndTag IS true>
<cfexit method="exitTemplate">
</cfif>
<cfparam name="attributes.field" type="variableName" default="trigger">
<cfparam name="attributes.content" type="string" default="#thisTag.generatedContent#">
<cfinput
type="text" name="#attributes.field#"
visible="false" height="0" width="0"
onChange="#attributes.content#"
bind="{(trigger.text != '') ? trigger.dispatchEvent({type:'change'}) : 'init'}"
>
Ive been beating my head over this for a while
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?
You can do that by changing the maxChars
Here are the docs:
http://livedocs.macromedia.com/flash/mx2004/main_7_2/00002864.html
- document.getElementById(flashForm);
- document.flashForm.focus();
I think that the problem may be because the output does not have the "embed" tag. Any ideas?
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:
<body onLoad="document.myform.focus();">
<cfform name="myform" ...>
</cfform>
---
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 :)
The tabnavigator has the property "selectedIndex" that can be used to show a specific tab (it starts at 0)
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);
}
jus checked in firefox. both the dispatchEvents are working in firefox. its only IE thats giving me a problem.