Write strict HTML code with ColdFusion 8 and using AJAX

The other day I was struggling with a combination of a form with AJAX parts (using the new cfdiv) in ColdFusion 8. After going trough the code a couple of times I could not see what was wrong and that drove me almost nuts. Here is the code I was having problems with (trimmed for this post):

<table>
<cfform name=”mycfform1″ >
<cfdiv bind=”url:test.cfm” id=”test” tagname=”div”>
</cfdiv>
<cfinput type=”text” name=”text2″/>
<cfinput type=”submit” name=”submit”>
</table>
</cfform>

and this is the test.cfm content:

<input type=”text” name=”test” />

The problem here is that the value of the text field within the <cfdiv> are not submitted at all. How come, you might ask? Apparently it is such that you will need to write “proper” HTML code when you use ColdFusion 8 along with the new AJAX tags. Thus, the above code is male formed, since the nested tags are not closing properly. Actually, just a little thing, but ending </table> and </cfform> are not correctly placed. The working code should be:

<table>
<cfform name=”mycfform1″ >
<cfdiv bind=”url:test.cfm” id=”test” tagname=”div”>
</cfdiv>
<cfinput type=”text” name=”text2″/>
<cfinput type=”submit” name=”submit”>
</cfform> <—–
</table> <—–

I have talked to Ashwin Mathew (from Adobe) about this and here is what he had to say on this issue:

“The table and form tags are not nested properly. When the browser gets this bit of code, it tries to reform it to make a valid HTML DOM tree for rendering, and, depending on the browser implementation, will open and close extra table and form tags to get a valid HTML DOM.

As a result, the form may no longer have any child input fields, since they may have been nested in another form tag inserted by the browser. Unfortunately, I’m not sure that there is much that can be done about this from the CF side of things - developers will have to be aware that they must nest tags properly.”

On the question why this is more strict in ColdFusion 8 then it is/was in ColdFusion 7 he said that “CF7 is easier on it since there was no AJAX magic being weaved in between. With AJAX functionality you do need to be a little more aware of the structure of your HTML”.

If you enjoyed this post, make sure you subscribe to my RSS feed!