Posted in ColdFusion | Posted on 08-05-2007 | 8,523 views
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:
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:
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:
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<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>
13Note 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.
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 :)
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?
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.
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.
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.
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.
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.
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.
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.
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?
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
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.
Can you use <cfinput type=file> inside a cfpod? After posting, the file element is never in the form variable.
Thanks!
Well if I remember right, all CFFORMs do. A regular <form> may post to the entire window.
[Add Comment] [Subscribe to Comments]