Friday, August 31, 2007

cfwindow source and cfdiv URL bind strip out <script> tags

This just in. When you use cfwindow or cfdiv to load content dynamically (e.g. thru cfwindow's source attribute, cfdiv's bind attribute (e.g. bind="url:foo.cfm"), or ColdFusion.navigate('foo.cfm')), when the content loads in your window/div, all <script> tags will be stripped from your code.

Consider the following:

<!-------- page.cfm -------->
<cfwindow name="myWindow" source="content.cfm" />

<input type="button" onClick="ColdFusion.Window.show('myWindow')" value="Show the Window">
<!-------- End page.cfm -------->

And the following content page, called by page.cfm
<!-------- content.cfm -------->
<script>

function tellMeSomething (somethingToTell) {

alert('somethingToTell');

}
</script>

<input type="button" onClick=" tellMeSomething('yadda-yadda-yadda'); " value="Tell me Something.">
<!-------- End content.cfm -------->

When page.cfm tells the cfwindow to load conten.cfm, here is the HTML that will be sent to the browser for content.cfm

<div style="overflow: auto; height: 253px; width: 474px;" id="myWindow_body" class="x-dlg-bd">

<input onclick=" tellMeSomething('yadda-yadda-yadda'); " type="button" value="Tell me Something.">
</div>
Notice that the <script tag and its associated function was completely stripped out.

Obviously, this is a problem if the page that you are loading needs to call a JavaScript function. There is a workaround, albeit a very imperfect one. If you put your JavaScript in the calling page (i.e. in the example above, you would put it in page.cfm), it will work.

The problem with the above workaround is that it encourages poor programming practices, and very high coupling between page.cfm and content.cfm.

2 comments:

acdhirr said...

Today I ran into that too... Though your post is nearly a year old, it's interesting to know that dynamic script inclusion is still possible, as Adobe states:

All JavaScript function definitions on pages that you include dynamically, for example by using a bind expression, the ColdFusion.navigate function, or a form submission within a ColdFusion Ajax container tag, must have the following syntax format:
functionName = function(arguments) {function body}

Function definitions that use the following format might not work:
function functionName (arguments) {function body}


Indeed the former function format worked for me.

http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=ajaxdata_11.html

regards,
Richard Osseweyer

Neil said...

Richard,

Good point. Thanks for posting that. I really should edit this post.

About 6 months ago I was at a small conference that took in a few local CF User Groups, and Ray Camden showed me the syntax that you mentioned. Saved me from insanity.

Regards,

-Neil