Reminder about forms and ColdFusion 8 Ajax Containers
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:
<cfoutput>loaded #timeFormat(now(), "long")#</cfoutput>
<p>
<hr>
<p>
<cflayout type="tab">
<cflayoutarea title="Tab 1">
<form>
<input type="text" name="name">
<input type="submit" name="submit">
</form>
<cfdump var="#form#">
</cflayoutarea>
<cflayoutarea title="Tab 2">
<cfform>
<cfinput type="text" name="name">
<cfinput type="submit" name="submit">
</cfform>
<cfdump var="#form#">
</cflayoutarea>
</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:
<cflayout type="tab" style="margin-left: 10px;">
<cflayoutarea title="Login" source="login.cfm" />
<cflayoutarea title="Register" source="register.cfm" />
</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.)
<cfset errors = "">
<cfif structKeyExists(form, "selected") and form.selected is "register">
<cfif not len(trim(form.username))>
<cfset errors = errors & "You must enter a username.<br />">
<cfelseif reFind("[^a-z0-9]", form.username)>
<cfset errors = errors & "Usernames can contain only numbers and letters.<br />">
</cfif>
</cfif>
<cfoutput>
<p>
Note that all form fields are required.
</p>
<cfform action="register.cfm" method="post">
<p>
<label>Username</label>
<input name="username" value="" type="text" size="30" />
<label>Password</label>
<input name="password" value="" type="password" size="30" />
<label>Name</label>
<input name="name" value="" type="text" size="30" />
<label>Email Address</label>
<input name="email" value="" type="text" size="30" />
<br /><br />
<input class="button" type="submit" value="Login"/>
<input type="hidden" name="selected" value="register">
</p>
</cfform>
</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.
Comments
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?