Mathijs’ Weblog

As mentioned in my previous post i’m rebuilding an admin environment for AO-online.nl application using all the new cf8 features.

1 of the forms used on this site is rely complex, it is 1 form spread over multiple tabs and 4 other forms in other tabs and using mutliple ajax, binding and JS functions and interdependancies.

This is how it looks:

And:

To achieve this I used this setup:

<cfform action=”" name=”form” method=”post”>
<cflayoutarea title=”MainForm_part1″ name=”tab1″ inithide=”false”>
formfields…
</cflayoutarea>
<cflayoutarea title=”MainForm_part2″ name=”tab2″ inithide=”false”>
formfields…
</cflayoutarea>
<cflayoutarea source=”subform1.cfm” name=”tab3″ inithide=”true” refreshOnActivate=”true” />
<cflayoutarea source=”subform2.cfm” name=”tab4″ inithide=”true” refreshOnActivate=”true” />
<cflayoutarea source=”subform3.cfm” name=”tab5″ inithide=”true” refreshOnActivate=”true” />
<cflayoutarea source=”subform4.cfm” name=”tab6″ inithide=”true” refreshOnActivate=”true” />
</cfform>

On the subform1.cfm pages is also use <cfform></cfform> to show the forms.
I’m also using the ColdFusion.Ajax.submitForm feature.

Now for the issue and the solution:

The issue: This is all working neatly in Firefox, the individual forms post to the backend handler, but in Internet Explorer no data at all is posted, resulting in this form not to work. Also form fields inside the loaded tabs forms are not recognized in IE.

The Solution: Apparently Internet Explorer cannot handle the nested forms that are created using the includes by the cflayout. Form showing it in the browser is it find, but when submitting the forms IE doesn’t understand it anymore. I thing it sees a </form> somewhere and then cannot handle what comes after.

So, this setup is working in both IE and Firefox:

<cfform action=”" name=”form” method=”post”>
<cflayoutarea title=”MainForm_part1″ name=”tab1″ inithide=”false”>
formfields…
</cflayoutarea>
<cflayoutarea title=”MainForm_part2″ name=”tab2″ inithide=”false”>
formfields…
</cflayoutarea>
<cflayoutarea name=”tab3″ inithide=”true” >
formfields…
</cflayoutarea>
<cflayoutarea name=”tab4″ inithide=”true” >
formfields…
</cflayoutarea>
<cflayoutarea name=”tab5″ inithide=”true” >
formfields…
</cflayoutarea>
<cflayoutarea name=”tab6″ inithide=”true” >
formfields…
</cflayoutarea>
</cfform>

I also tried this, but with no results:

<cflayoutarea title=”MainForm_part2″ name=”tab2″ inithide=”false”>
formfields…
</cflayoutarea>
<cflayoutarea name=”tab3″ inithide=”true” >
<cfinclude template=”subform1.cfm”">
</cflayoutarea>
etc…

So, i hope this is valuable information for anyone out there…

I’m completely rebuilding an admin environment for an online application (www.ao-online.nl) using all the new Coldfusion 8 AJAX features.

I came accross the cftree and binding possibilities, I could not find a good example on the net, to copy-paste from. so here it is…

In case you wonder how to implement a bind to a cftree in order to get a hierarchical view of tree data from a database, you can use the example code below. I could not find a good example on the net.

I found these link that describe this functionality a bit (but not how I wanted it):

• http://www.forta.com/blog/index.cfm/2007/6/5/ColdFusion-Ajax-Tutorial-5-File-System-Browsing-With-The-Tree-Control
• http://www.garyrgilbert.com/blog/index.cfm/2007/6/18/cftree

Read the rest of this entry »