I just found a "gotcha" with using forms that are spread across several tabs in a cflayout area. The form would render properly in all browsers, the tabs worked just fine, and my "Save" and "Apply" buttons submitted properly. Everything worked well, except whenever I submitted the form using Firefox my changes wouldn't be saved. In IE, however, the changes were kept. I checked out the problem in Safari 3, and the problem existed in that browser as well. (I'm referring to a Windows environment, by the way-- I don't know if this circumstance would occur on a Mac, although I tend to think it would.)
So the first thing I did to solve the problem was pretty revealing. I used cfdump to view the contents of the FORM scope after the form was submitted; in IE, obviously, all of the form data was being submitted, but in FireFox, none of it was being passed to the server. Why would this be?
I visually inspected the rendered HTML code, and also ran it through HomeSite's document validator, but there were no obvious errors with the HTML. But there was one very subtle anomaly that I noticed that turned out to point to the solution Here's an abridged version of the code below. See if you can guess why the fields would have been submitted with IE but not with Firefox:
<html>
<head><script type="text/javascript">_cf_loadingtexthtml="<div align='center'><img src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'/>";
_cf_contextpath="";
_cf_ajaxscriptsrc="/CFIDE/scripts/ajax";
_cf_jsonprefix='//';
_cf_clientid='3DD4269A8EDF57E48E856FA005DC90CE';</script><script type="text/javascript" src="/CFIDE/scripts/ajax/messages/cfmessage.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfajax.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/ext-core.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/tabs/tabs.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cflayout.js"></script>
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/ext/css/ext-all.css" />
<script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>
<title>Preferences</title>
<link rel="shortcut icon" type="image/ico" href="images/webmail.ico" />
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<script language="JavaScript" src="lang/English.cfm" type="text/javascript"></script>
<script language="JavaScript" src="js/preferences.js" type="text/javascript"></script>
<script type="text/javascript">
ColdFusion.Event.registerOnLoad(addTabChangeListener,null,false,true);
</script>
<script type="text/javascript">
ColdFusion.Ajax.importTag('CFLAYOUT-TAB');
</script>
<script type="text/javascript">
var _cf_layout_init_1205505671090=function()
{
var _cf_layout=ColdFusion.Layout.initializeTabLayout("preferences");_cf_layout.tabheight='300px'
ColdFusion.Layout.addTab(_cf_layout,"profile","Personal Info",false,false);
ColdFusion.Layout.selectTab('preferences','profile');
ColdFusion.Layout.addTab(_cf_layout,"reading","Reading Mail",false,false);
ColdFusion.Layout.addTab(_cf_layout,"privacy","Reading Mail",false,false);
ColdFusion.Layout.addTab(_cf_layout,"composing","Composing Mail",false,false);
};ColdFusion.Event.registerOnLoad(_cf_layout_init_1205505671090);
</script>
<script type="text/javascript">
<!--
_CF_checkprefsForm = function(_CF_this)
{
//reset on submit
_CF_error_exists = false;
_CF_error_messages = new Array();
_CF_error_fields = new Object();
_CF_FirstErrorField = null;
//display error messages and return success
if( _CF_error_exists )
{
if( _CF_error_messages.length > 0 )
{
// show alert() message
_CF_onErrorAlert(_CF_error_messages);
// set focus to first form error, if the field supports js focus().
if( _CF_this[_CF_FirstErrorField].type == "text" )
{ _CF_this[_CF_FirstErrorField].focus(); }
}
return false;
}else {
return true;
}
}
//-->
</script>
</head>
<body>
<style type="text/css">
input[type="submit"] {width: 60px;}
#preferences {width: 100%; height: 240px;}
.ytab {padding: 10px;}
</style>
<table width="100%" cellspacing="0" cellpadding="0" border="0" id="listHead">
<tr>
<th style="font-weight: bold; font-size: 14px; line-height: 24px;">Preferences</th>
</tr>
<form name="prefsForm" id="prefsForm" action="preferences.cfm" method="post" onsubmit="return _CF_checkprefsForm(this)">
</table>
<div id="prefs" style="width: 520px; padding: 10px; margin-bottom: 20px;">
<input type="hidden" name="tab" value="profile" />
<div id="preferences">
<div id="profile" class="ytab" style="overflow:auto;height:300px;;">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td><label for="name">Your Name:</label> </td>
<td width="100%"><input type="text" name="name" value="Tom Mollerus" size="40" style="width: 100%;" /></td>
</tr>
<!--- More fields ... --->
</table>
</div>
<div id="reading" class="ytab" style="overflow:auto;height:300px;;">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td><input type="checkbox" name="checkForNew" value="1" /> </td>
<td width="100%">Refresh time: <input type="text" name="refreshTime" value="10" size="3" /> minutes</td>
</tr>
<!--- More fields ... --->
</table>
</div>
<div id="privacy" class="ytab" style="overflow:auto;height:300px;;">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr valign="top">
<td><input type="checkbox" name="blockExternalCalls" value="1" checked /> </td>
<td>Block calls to external files (such as images and stylesheets) unless the sender is in my addressbook or in the following list:<br>
<textarea name="unblockAddresses" rows="5" cols="50" class="content" style="width: 100%;"></textarea></td>
</tr>
<!--- More fields ... --->
</table>
</div>
<div id="composing" class="ytab" style="overflow:auto;height:300px;;">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td><input type="checkbox" name="useHTML" value="1" /> </td>
<td width="100%">Compose new messages in HTML</td>
</tr>
<!--- More fields ... --->
</table>
</div>
</div>
</div><br clear="all" />
<br />
<br />
<div id="prefs2" style="width: 520px; padding: 10px; margin-top: 20px;">
<br />
<div style="text-align: right;">
<input type="submit" name="save" value="Save" class="menuButton" />
<input type="submit" name="cancel" value="Cancel" class="menuButton" onclick="window.close();" />
<input type="submit" name="apply" value="Apply" class="menuButton" />
</div>
</div>
</form>
</body>
</html>
Do you see where I placed the form tag? By longstanding habit, I've always placed the form tag in between table row tags, in order to suppress the extra line break that sometimes appears before a form (it used to happen much more often back in the days of Netscape 4 and IE 4 and 5). Well, the anomaly that I noted in HomeSite's validator was a line in the results that read:
The tag: "body" allows optional end tag. End tag: "form" closes "body" context. Validation will proceed as if the tag were ended.When I moved the form tag out from among the table tags, to a position where it wasn't wrapped by any other tags (except
body, of course) the validator didn't come up with that particular line again. And, the tabbed form started submitting data properly in Firefox and Safari. Given that this happened only in FF and Safari but not in IE, I wonder if it has to do with the rendering mode of the browser. Perhaps the problem could be also be fixed with a particular DOCTYPE declaration at the top of the page; that's something I'll have to check in to later.
So if you have the same habit as I do of "hiding" your form tags between table rows in order to suppress the line break they cause, watch out for this issue if you ever create a tabbed layout.
Comments (3)
March 14, 2008
17:33PM | #
Tom:
The form spacing issue has always been a problem for me.
I have the following CSS rule in all of my stylesheets:
FORM {margin:0;}
This should get rid of the extra spacing produced by the form tag.
March 14, 2008
17:48PM | #
@Ken, that's another great solution. It's probably better than using a DOCTYPE declaration.
March 26, 2008
10:02AM | #
Hey Tom, just wanted to say thanks - I was having a slightly different problem, but the last part of your post sparked a thought that helped me.
I had a form within a CFDIV tag, and I was having all sorts of safari issues (I was trying to get an iPhone web app to work).
What I needed to do was wrap the entire table in the CFFORM tag (this also works the same way with the FORM tag, so its not a CF thing), instead of having the form inside the table.
Hours of frustration finally sorted out.
Cheers,
Davo