OnLoad event in ColdFusion Flash Forms Part I
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.
Download the source
Update: This hack is no longer needed after ColdFusion updater 7.01
pim
I 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>
Derek
Laura
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
Derek Perez
Nahuel
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
Jordan Clark
<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'}"
>
Prem
Ive been beating my head over this for a while
petruc
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
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
- document.getElementById(flashForm);
- document.flashForm.focus();
I think that the problem may be because the output does not have the "embed" tag. Any ideas?
Chris
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>
Chris
daniel fredereicks
---
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
Laura
The tabnavigator has the property "selectedIndex" that can be used to show a specific tab (it starts at 0)
Prabhu Thomas
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
jus checked in firefox. both the dispatchEvents are working in firefox. its only IE thats giving me a problem.