{"id":240,"date":"2012-03-23T10:53:46","date_gmt":"2012-03-23T14:53:46","guid":{"rendered":"http:\/\/www.thefaberfamily.org\/search-smith\/?p=240"},"modified":"2012-03-23T20:58:45","modified_gmt":"2012-03-24T00:58:45","slug":"coldfusion-cfajaxproxy-and-the-head-tag","status":"publish","type":"post","link":"http:\/\/www.thefaberfamily.org\/search-smith\/2012\/03\/coldfusion-cfajaxproxy-and-the-head-tag\/","title":{"rendered":"ColdFusion: CFAJAXPROXY and the HEAD tag"},"content":{"rendered":"

A developer had an interesting problem recently which he related on StackOverflow<\/a>. Normally, if the <cfajaxproxy><\/code> tag is used it inserts JavaScript code immediately after the <head><\/code> tag. However, if the <head><\/code> tag has attributes, then ColdFusion tries to insert the JavaScript code within<\/em> the <head><\/code> tag (i.e., before the ><\/code> sign marking the end of the tag):<\/p>\n

<html>\r\n<head <script type=\"text\/javascript\">\/* <![CDATA[ *\/_cf_loadingtexthtml=\"<img alt=' ' src='\/CFIDE\/scripts\/ajax\/resources\/cf\/images\/loading.gif'\/>\";\r\n_cf_contextpath=\"\";\r\n_cf_ajaxscriptsrc=\"\/CFIDE\/scripts\/ajax\";\r\n_cf_jsonprefix='\/\/';\r\n_cf_clientid='A0A76C2B1D80B084CEAB5AA874B0CEFE';\/* ]]> *\/<\/script><script type=\"text\/javascript\" src=\"\/CFIDE\/scripts\/ajax\/messages\/cfmessage.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"\/CFIDE\/scripts\/ajax\/package\/cfajax.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\/* <![CDATA[ *\/\r\nColdFusion.Ajax.importTag('CFAJAXPROXY');\r\n\/* ]]> *\/<\/script>\r\n\r\n<script type=\"text\/javascript\">\/* <![CDATA[ *\/\r\nvar _cf_article=ColdFusion.AjaxProxy.init('\/test\/stuff.cfc','stuff');\r\n\/* ]]> *\/<\/script>\r\nprofile=\"http:\/\/gmpg.org\/xfn\/11\">\r\n<title>Test Page<\/title>\r\n<\/head><\/pre>\n
At first, I thought this was merely an inconvenience – the developer in question had stated that he was using the id<\/code> attribute of the <head> tag, which is not valid HTML 4.01 syntax. However, it is<\/em> valid HTML5 syntax and, what’s more, it doesn’t work properly even with<\/em> valid HTML 4.01 attributes for the <head><\/code> tag, as seen in the code example above. The profile<\/code> attribute is<\/em> valid HTML 4.01 syntax and there is no reason that ColdFusion should not detect the attribute. What ColdFusion appears to be doing is searching for the first occurrence of <head<\/code>, advancing one character (no matter what that character is), and then inserting the JavaScript code. That strikes me as pretty poor programming. The <cfajaxproxy><\/code> tag should either search for a regular expression (\"(<head>|<head\\s[^>]*>)\"<\/code>) and insert the code after the match, or traverse the elements of the page’s DOM tree. I now have no qualms with stating that this is a bug. (The <cfajaxproxy> tag was introduced in ColdFusion 8; the bug exists in at least ColdFusion 8 and ColdFusion 9 – I don’t know about ColdFusion 10.)<\/p>\n
All that said, how do we work around this issue? Fixing tons of web pages certainly isn’t convenient, but there may be some options. One, you can put in an additional <head><\/code> tag (with its closing tag) above the “problematic” one. I have no idea what sort of side effects this may produce. Two, you can put a set of phony tags above the problematic one: <fake<head><\/fake<head><\/code>. Again, I have no idea what side effects this may produce. Your JavaScript code certainly won’t be in the <head><\/code> tag if you take this route.<\/p>\n
Third, you can add some code into the onRequest()<\/code> method of your Application.cfc file (yes, there are issues with web services when using onRequest()<\/code> but those can be addressed<\/a>):<\/p>\n
<cfsilent>\r\n<!--- Grab the requested page. --->\r\n<cfsavecontent variable=\"local.target_page\">\r\n<cfinclude template=\"#arguments.target_page#\" \/>\r\n<\/cfsavecontent>\r\n\r\n<cfset local.target_page = REReplace(local.target_page, \"(<head\\s[^>]*>)\", \"<head>\") \/>\r\n<cfajaxproxy cfc=\"test.stuff\" jsclassname=\"stuff\" \/>\r\n<\/cfsilent>\r\n<cfoutput>#local.target_page#<\/cfoutput><\/pre>\n
Oddly, the above works even when the call to <cfajaxproxy><\/code> is on the target page instead of in onRequest()<\/code>! I guess that tag is not actually invoked until the page is actually served. I don’t know how the above will affect the performance of the page, and I don’t know if it will even work with complex code (I tried it with a rather uncomplicated page myself). It does appear to work at first glance, but it’s a workaround. The real issue is that there is a bug.<\/p>\n
Update:<\/strong> Bug reported to Adobe<\/a>.<\/p>\n
\r\n      
\r\n        <\/g:plusone>\r\n      <\/div>\r\n    \r\n      
\r\n        Tweet<\/a>\r\n      <\/div>\r\n    \r\n      
\r\n        
<\/div>\r\n