Our Blog

Following my previous post, I made another form with more complex functionality.
In this case, I have two dummy cfinputs instead of only one. Adding a second input helps getting around the limitations I had mentioned in my last post.

One of the cfinputs is linked to the other so that when the input "userType" sets its value, the change is caught by input "trigger" that fires the onLoad event. We are now able to access some values inside the onLoad, such as the value of "userType" because of the order of the events that are executed.

This also solves the limitation of needing to place the triggering input at the end, we can put it anywhere.

In this example, the behavior of the onload event depends on a variable (userLevel) set at the top for simplicity. userLevel equals to 0 means that the user is an administrator, in which case, we let the user access the form. The onLoad function checks what is the level of the user and disables the form if he/she is not an administrator.

You can download the source and play with the variable "userLevel" to see the changes.

Code:

<cfset userLevel = "1"/>
<cfsavecontent variable="onLoad">
   if(userType.text != 0){
      alert("Sorry but only the administrator can change this setting" ,'Warning Message',mx.controls.Alert.OK);
      newUser.enabled = false;
   }
</cfsavecontent>
<cfsavecontent variable="setup">
   {(userType.text != '') ? userType.dispatchEvent({type:'change'}) : ''}"
</cfsavecontent>

<cfform name="myform" format="flash" height="200" width="400">
   <cfformgroup type="hbox">
      <cfinput type="text" visible="false" height='0' width="0" name="userType" value='#userLevel#' onchange="#onLoad#">
      <cfinput type="hidden" name="trigger" bind="#setup#">
      <cfinput type="text" label="Add new user" name="newUser" value="" >

   </cfformgroup>
</cfform>

View the example as user and as admin.
Download the source

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

Nahuel Foronda

Nahuel Foronda

13 Comments

  1. Lou Trident

    Lou Trident

    What would be the best way to load cf flash form fields into array? The new array function is disallowed, and it looks like parts of your code might be a solution for this.
  2. Nahuel
    Hi Lou,
    If you want to create an Array you can created like this :
    myArray = [];
    It's not necessary to use the &quot;new Array()&quot; syntax.
  3. Todd
    Is there a way to bind an array to a textarea so that when the array is created the textbox displays the results?
  4. Neil Bailey
    Do you know of a way to position the alert box where you want it? This is *brilliant*, by the way - I have no idea why macromedia left the onload out for flash forms.

    We have a fairly long flash form, and often the alert box is down off the screen. Any way we can position it so that its always at the top of the form (or wherever we want it?)??
  5. Fred Weber

    Fred Weber

    This technique worked fine, until I ran into a problem where it was triggering before the creation of the form was completed. After two days of messing around with this, I found a solution (when are we going to get a manual for this from Macromedia?).

    The problem is that this technique can trigger before the entire form is rendered and available for use. If this happens, then the properties of any controls not rendered are unavailable.

    What is really needed is a way to execute the onLoad handler after the form is completely rendered and available for use. It turns out that there is an event in Flex that is fired when this happens. The trick is to add an event listener tied to this event that calls the actual onLoad that you want to run. This is also available in cfforms with flash.

    The solution is to add this event listener to the onLoad code:

    &lt;cfset userLevel = &quot;1&quot;/&gt;

    &lt;cfsavecontent variable=&quot;onLoad&quot;&gt;
    var myListener = {};
    myListener.creationComplete = function() {
    if(userType.text != 0)
    {
    alert(&quot;Sorry but only the administrator can change this setting&quot; ,'Warning Message',mx.controls.Alert.OK);
    newUser.enabled = false;
    }
    }
    this.addEventListener('creationComplete', myListener);
    &lt;/cfsavecontent&gt;

    The first two new lines create a listener object and assigns the 'creationComplete' event to it. Note that I can't use the 'new' keyword since it is illegal in this context, so I use a shortcut '{}' that creates a new object without using the illegal keyword.

    The last two lines that are new close the function I created (the '}' and adds the event listener that I created into the event handling routines.

    The rest of the code from the &quot;onLoad part II&quot; example is the same.

    Now, my onLoad handler only runs after the entire form is completly rendered and available for use.

    One last comment:

    Since the onLoad handler is now in a separate function, the cfform controls are no longer at the same level as the handler. Thus, you must explicitly define each control in your form inside this handler before using it. The cfform and it's controls are at _level0, so just add these lines to the handler:

       execute2 = _level0.execute2;
       notify2 = _level0.notify2;
       cheating2 = _level0.cheating2;
       email2 = _level0.email2;

    where execute2, notify2, cheating2, and email2 are all cfinput controls on my form. This should work for all other types of controls also.
  6. Nahuel
    Hi Neil
    You can check this post that may help you:
    http://www.asfusion.com/blog/entry/customizing-a-cfform-alert-with-pictures
  7. David Brannan

    David Brannan

    What if you wanted to display a flash based alert only when certain part of your page loads. For instance:

    &lt;cfif isDefined(&quot;Form.Submit&quot;)&gt;
    Your action code goes here.
    &lt;cfif something goes wrong&gt;
    Show flash based alert here.
    &lt;/cfif&gt;
    &lt;/cfelse&gt;
    Your cfform goes here.
    &lt;/cfif&gt;

    Is this possible, since it would no longer be located between the cfform tags?
  8. Hugo D
    Hi!
    First of all, ASFusion has been a great help as I'm not a AS expert (nor anything like it).
    My question is just this one: so far people have been talking about onLoad event emulation (and now available on CFMX 7.0.1). I'm looking for a way to trigger an event once the form has loaded. Any help appreciated.

    Thanks

    Hugo
  9. Laura
    Hugo,
    Using onload is pretty straight-forward:
    onload=&quot;some ActionScript code&quot;

    or you can call a function, see an example here:
    http://www.asfusion.com/blog/entry/using-global-css-in-your-cfform
  10. David Brannan
    Is there a way to globally set the enable attribute so all form buttons are disabled until the data arrives?

    I say this, because it appears if you click a button before the data arrives it freezes the browser.
  11. Shelley
    I was having issues trying to populate a tree component with remoting. The data was returning prior to the flash form completing its rendering. I added an eventListener, as Fred suggests, with the forms onLoad event to populate a tree.

    This worked perfect on a windows environment, but not on a UNIX system.

    I've also found that action script that is included will not cache on a UNIX environment, like it will on Windows.

    Has anyone else run into these issues? And if so, found solutions?
  12. Shelley
    I was having issues trying to populate a tree component with remoting. The data was returning prior to the flash form completing its rendering. I added an eventListener, as Fred suggests, with the forms onLoad event to populate a tree.

    This worked perfect on a windows environment, but not on a UNIX system.

    I've also found that action script that is included will not cache on a UNIX environment, like it will on Windows.

    Has anyone else run into these issues? And if so, found solutions?