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.