Ask a Jedi: cfdiv, cfform, cflayout and selecting tabs - also a new bug?

This post is more than 2 years old.

Patrick asks:

Quick question (i think). I have this CFDIV with a form on it. When I submit this form I want it to go to another page (within the cfdiv) that has a cf tab layout on it, and based on whatever they select on the form I would like that tab to be selected when hitting the cf tab layout on the new page after they submit the form. Any ideas on how I could accomplish this, my attempts have failed. Thanks.

Let's break this down a bit.

First off, when inside a cfdiv (or pod, window, layoutarea), you can automatically keep the form post inside the container by using cfform. So consider these two simple files. First, my root test file:

<cfajaximport tags="cfform,cflayout-tab">

<h2>Headers for the Win</h2>

<cfdiv bind="url:test3.cfm" />

<h2>Footers for the Win</h2>

And then test3.cfm:

<cfform action="test2.cfm" method="post"> <cfinput type="submit" name="doit1" value="Do One"> <cfinput type="submit" name="doit2" value="Do Two"> <cfinput type="submit" name="doit3" value="Do Three"> </cfform>

Nothing too complex here. (I'll explain the button names in a sec.) This will load a page with a div where CF's Ajax code will automatically load in test2.cfm. Because I used cfform, the post will stay within the div context. Now I need to build a page that creates tabs and automatically selects the right one. This too is rather trivial.

<cfset t1Selected = false> <cfset t2Selected = false> <cfset t3Selected = false>

<cfif structKeyExists(form, "doit1")> <cfset t1Selected = true> <cfelseif structKeyExists(form, "doit2")> <cfset t2Selected = true> <cfelse> <cfset t3Selected = true> </cfif>

<cflayout type="tab"> <cflayoutarea title="Tab1" selected="#t1Selected#" /> <cflayoutarea title="Tab2" selected="#t2Selected#" /> <cflayoutarea title="Tab3" selected="#t3Selected#" /> </cflayout>

As you can see, I simply set state values for each tab to false and then check my form scope to see which value was passed. I say trivial, but when working on this I ran into two odd bugs.

First off, my form initially had buttons with a name of action. When I did that, the form post failed due to some odd JavaScript error. It seems as if you cannot use a form field named ACTION within a form that will be 'ajax posted' within cfform. So I changed all 3 buttons to "doit". Since the value was different, I should get form.doit equal to whatever button you push, right? Wrong. No matter what I pushed, the value was equal to all three values appended together in a list. Hence the switch to doit1, doit2, doit3. I assume again that this is just a quirk of CF's automatic "keep it inside" logic for cfform within containers.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA