While this is covered in the docs, it can be a bit surprising. When working with ColdFusion 8 Ajax-based containers (cfdiv, cflayoutarea, cfpod, and cfwindow), any form inside the area will be posted to the area itself. What that means is - the entire page won't reload, just the container. However - this is only true for cfform, not form. Consider this code example:
1 <cfoutput>loaded #timeFormat(now(), "long")#</cfoutput>
2 <p>
3 <hr>
4 <p>
5 <cflayout type="tab">
6
7 <cflayoutarea title="Tab 1">
8 <form>
9 <input type="text" name="name">
10 <input type="submit" name="submit">
11 </form>
12 <cfdump var="#form#">
13 </cflayoutarea>
14
15 <cflayoutarea title="Tab 2">
16 <cfform>
17 <cfinput type="text" name="name">
18 <cfinput type="submit" name="submit">
19 </cfform>
20 <cfdump var="#form#">
21 </cflayoutarea>
22
23 </cflayout>
I have a simple page with a time stamp on top. Then I have 2 tabs. The first tab has a FORM based form, and the second tab has a CFFORM based form. If you post the first tab, the entire page reloads. If you post the second form, the content of the second form is replaced.
And here is where things get freaky. Notice I didn't do an action for the cfform. That means the action is the same as the current page. The current page defines tabs. So guess what I get inside? Yep, tabs within tabs. Consider this screen shot:
2 <p>
3 <hr>
4 <p>
5 <cflayout type="tab">
6
7 <cflayoutarea title="Tab 1">
8 <form>
9 <input type="text" name="name">
10 <input type="submit" name="submit">
11 </form>
12 <cfdump var="#form#">
13 </cflayoutarea>
14
15 <cflayoutarea title="Tab 2">
16 <cfform>
17 <cfinput type="text" name="name">
18 <cfinput type="submit" name="submit">
19 </cfform>
20 <cfdump var="#form#">
21 </cflayoutarea>
22
23 </cflayout>
Most likely this isn't what you want. You want to be sure you specify an action and that the action isn't the same as the page that hosts the form itself. So here is an example from an upcoming update to ColdFusionBloggers:
1 <cflayout type="tab" style="margin-left: 10px;">
2
3 <cflayoutarea title="Login" source="login.cfm" />
4
5
6 <cflayoutarea title="Register" source="register.cfm" />
7
8 </cflayout>
The contents of register.cfm contain just the form itself. (This page is in development right now, so pardon the half-completed error checking.)
2
3 <cflayoutarea title="Login" source="login.cfm" />
4
5
6 <cflayoutarea title="Register" source="register.cfm" />
7
8 </cflayout>
1 <cfset errors = "">
2
3 <cfif structKeyExists(form, "selected") and form.selected is "register">
4 <cfif not len(trim(form.username))>
5 <cfset errors = errors & "You must enter a username.<br />">
6 <cfelseif reFind("[^a-z0-9]", form.username)>
7 <cfset errors = errors & "Usernames can contain only numbers and letters.<br />">
8 </cfif>
9 </cfif>
10
11 <cfoutput>
12 <p>
13 Note that all form fields are required.
14 </p>
15
16 <cfform action="register.cfm" method="post">
17 <p>
18 <label>Username</label>
19 <input name="username" value="" type="text" size="30" />
20 <label>Password</label>
21 <input name="password" value="" type="password" size="30" />
22 <label>Name</label>
23 <input name="name" value="" type="text" size="30" />
24 <label>Email Address</label>
25 <input name="email" value="" type="text" size="30" />
26 <br /><br />
27 <input class="button" type="submit" value="Login"/>
28 <input type="hidden" name="selected" value="register">
29 </p>
30 </cfform>
31 </cfoutput>
So all in all a pretty cool feature. I'll be able to reload inside my tab without reloading the entire page - but it is definitely something you have to watch out.
2
3 <cfif structKeyExists(form, "selected") and form.selected is "register">
4 <cfif not len(trim(form.username))>
5 <cfset errors = errors & "You must enter a username.<br />">
6 <cfelseif reFind("[^a-z0-9]", form.username)>
7 <cfset errors = errors & "Usernames can contain only numbers and letters.<br />">
8 </cfif>
9 </cfif>
10
11 <cfoutput>
12 <p>
13 Note that all form fields are required.
14 </p>
15
16 <cfform action="register.cfm" method="post">
17 <p>
18 <label>Username</label>
19 <input name="username" value="" type="text" size="30" />
20 <label>Password</label>
21 <input name="password" value="" type="password" size="30" />
22 <label>Name</label>
23 <input name="name" value="" type="text" size="30" />
24 <label>Email Address</label>
25 <input name="email" value="" type="text" size="30" />
26 <br /><br />
27 <input class="button" type="submit" value="Login"/>
28 <input type="hidden" name="selected" value="register">
29 </p>
30 </cfform>
31 </cfoutput>
Comment 1 written by John Ramon on 5 August 2007, at 6:46 PM
Comment 2 written by Raul Riera on 5 August 2007, at 7:29 PM
Comment 3 written by Raymond Camden on 5 August 2007, at 7:56 PM
Comment 4 written by Raymond Camden on 6 August 2007, at 6:41 AM
Comment 5 written by Brian Swartzfager on 6 August 2007, at 6:49 AM
Comment 6 written by DK on 6 August 2007, at 8:57 AM
I ask because another good 'oh yeah' is ColdFusion.Ajax.submitForm cannot handle file fields. I'm currently re-working some prototyping because of that :)
Comment 7 written by Raymond Camden on 6 August 2007, at 11:06 AM
Comment 8 written by JC Anderson on 13 August 2007, at 10:50 AM
I'm trying to use a checkbox that submits using onclick inside the code you provide.
<cfinput type="checkbox" name="test" onClick="form.submit();" value="1">test
Unfortunately, the page reloads. How do you get it to load inside the tab?
Comment 9 written by todd sharp on 13 August 2007, at 12:36 PM
http://cfsilence.com/blog/client/index.cfm/2007/8/...
Is it absolutely necessary to submit the form that way? It could be hacked but IMO it would get ugly.
Comment 10 written by JC Anderson on 13 August 2007, at 2:39 PM
I also have a CFC with a function that contains dynamically generated JScript. If I use it in an AJAX container, it fails miserably, too.
Gotta keep in mind that those containers are limited and keep it simple.
Comment 11 written by Michael White on 24 August 2007, at 9:45 AM
but cflocation doesn't seem to like that. maybe the syntax is wrong or maybe there's another way besides cflocation to send me on my way after the processing is done.
Comment 12 written by Raymond Camden on 24 August 2007, at 10:05 AM
And yes - you can't put anything but a valid URL (absolute or relative) in a cflocation.
Also - don't forget you can just post the form using ColdFusion.Ajax.SubmitForm(). No need to go anywhere really.
Comment 13 written by Michael White on 24 August 2007, at 11:10 AM
Comment 14 written by Raymond Camden on 24 August 2007, at 11:16 AM
If you have N BUs, you cflocate to a page where you ask a person to pick the BU. When they leave THAT page, you break out of the cfdiv.
SO my question is - on the page that displays the BUs, how do you let them pick a BU? Is it an HTML link? If so - you need to use AjaxLink to keep stuff inside the div. If it is a form, you need to use cfform to keep them in the div.
Comment 15 written by Michael White on 24 August 2007, at 11:40 AM
Comment 16 written by Raymond Camden on 24 August 2007, at 11:46 AM
Comment 17 written by Michael White on 24 August 2007, at 11:50 AM
on the cfmenu I also have a "Change Business Unit" menuitem that takes me directly to the BU form. I can change BU and come back to the dashboard all within the cfdiv. same BU form, just skip the customer form.
Comment 18 written by Raymond Camden on 24 August 2007, at 1:00 PM
Also consider maybe temporarily removing the form and replacing it with a ajaxlink to see if a GET op works ok. (ie, hard coded the BU)
Lastly, you can use COldFusion.Ajax.submitForm instead as I mentioned earlier.
Comment 19 written by Michael White on 25 August 2007, at 3:06 PM
Comment 20 written by Michael White on 25 August 2007, at 4:06 PM
Comment 21 written by Michael White on 25 August 2007, at 9:32 PM
Comment 22 written by Raymond Camden on 26 August 2007, at 10:45 AM
Comment 23 written by Mike Sprague on 9 October 2007, at 9:29 AM
Comment 24 written by Raymond Camden on 9 October 2007, at 9:57 AM
Comment 25 written by joe on 5 May 2008, at 12:51 PM
onchange="document.yourFormID.yourSubmitID.click();"
and I made my submit button hidden
input type="submit" name="yourSubmitID" id="yourSubmitID" value="Submit" style="visibility:hidden"
Is there a better way to submit a form on event without actually clicking a submit button?
Comment 26 written by TD on 12 June 2008, at 11:12 AM
Comment 27 written by Melvin Taclibon on 22 April 2009, at 2:08 PM
Quick question regarding session variables on CFPOD.
1. I have a button that grabs the of a selected CFGRIDROW.-
2. The button execute an onclick function, and the function looks like this:
x = ColdFusion.getElementValue('FileGrid','myGrid','Directory');
ColdFusion.navigate('test_LoadFile.cfm?Directory=' + x + '&' + 'Name=' + y + '&' + 'Path=' + z,'DevContainer');
Here's my issue:
1. I tried to create a session table inside 'test_LoadFIle.cfm'. The code somewhat looks like this:
<cfif isDefined('session.PlaceHolder')>
<cfset QueryAddRow(session.PlaceHolder,1)/>
<cfset QuerySetCell(session.PlaceHolder,"name","#url.name#")/>
..... (and some other querySetCell)
<cfelse>
<cfset session.PlaceHolder = QueryNew("name,path,directory")>
<cfset QueryAddRow(session.PlaceHolder,1)/>
<cfset QuerySetCell(session.PlaceHolder,"name","#url.name#")/>
..... (and some other querySetCell)
</cfif>
2. It looks like the 'session' table gets lost when I pick another value from my grid and add it to my session table. It will always execute the condition after <cfelse> in test_LoadFIle.cfm
I tried to create the session table in the main page, before CFPOD gets created. Same deal. It looks like everytime you use ColdFusion.navigate, it breaks the session.
Question is:
Do you know if there is any issue of session varaible break when using ColdFusion.navigate?
Thanks.
Melvin
Comment 28 written by Raymond Camden on 24 April 2009, at 7:34 AM
Comment 29 written by Melvin on 4 May 2009, at 9:25 AM
Your reply lead me to the solution to my issue. What I was doing initially was that I have a testing folder with all of my experiments. And this has no APPLICATION.CFC... jeeeeez!
So I created one, and tested it back. Session variables are retained using ColdFusion.navigate.
Thanks for the help.
Comment 30 written by Tim on 9 November 2009, at 3:28 PM
Can you use <cfinput type=file> inside a cfpod? After posting, the file element is never in the form variable.
Thanks!
Comment 31 written by Raymond Camden on 9 November 2009, at 3:30 PM
Well if I remember right, all CFFORMs do. A regular <form> may post to the entire window.
[Add Comment] [Subscribe to Comments]