More Dynamic JavaScript With ColdFusion
Posted By : todd sharp Posted At : February 17, 2009 1:21 PM Posted In: JavaScript, ColdFusion
0
Earlier today I blogged about serving dynamic JavaScript with ColdFusion. The demo was a bit boring, so I decided to make it a tiny bit more dynamic. In this example we'll be passing a URL variable to the CFM template that serves up the JavaScript and we'll use that variable to conditionally include other JavaScript files which will actually output some content to the page.
Hopefully this demo will illustrate why this method may be a little more handy then dynamically adding the script directly to the DOM via a single static JS file. In this example we have a new set of files. newone.js:one = function(){
return '<p style=\"font-family: courier; color: red; font-size: 16px; border: 7px dashed green;\">hi i\'m file one!</p>';
}
var o = one();
document.write(o);
newtwo.js:
return '<p style=\"font-family: courier; color: red; font-size: 16px; border: 7px dashed green;\">hi i\'m file one!</p>';
}
var o = one();
document.write(o);
two = function(){
return '<p style=\"font-family: sans-serif; color: purple; font-size: 12px; border: 3px solid magenta;\">hi i\'m file two!</p>';
}
var t = two();
document.write(t);
newJSInclude.cfm:
return '<p style=\"font-family: sans-serif; color: purple; font-size: 12px; border: 3px solid magenta;\">hi i\'m file two!</p>';
}
var t = two();
document.write(t);
<cfparam name="url.whichone" default="one" />
<cfif url.whichone neq 'one' and url.whichone neq 'two'>
<cfset url.whichone = "one" />
</cfif>
<cfcontent type="text/javascript">
<cfif url.whichone eq 'one'>
<cfinclude template="newone.js" />
</cfif>
<cfif url.whichone eq 'two'>
<cfinclude template="newtwo.js" />
</cfif>
So in this example we're doing some very crude variable checking and using the url variable to tell us which static JS file to include. Obviously we can get more dynamic here if we wanted to. We could also call a CFC to get some data - whatever we need to do that we would normally do in a CFM page.
demo2.cfm:
<cfif url.whichone neq 'one' and url.whichone neq 'two'>
<cfset url.whichone = "one" />
</cfif>
<cfcontent type="text/javascript">
<cfif url.whichone eq 'one'>
<cfinclude template="newone.js" />
</cfif>
<cfif url.whichone eq 'two'>
<cfinclude template="newtwo.js" />
</cfif>
<html>
<head>
</head>
<body>
<cfoutput>
<p>
<a href="#cgi.SCRIPT_NAME#?whichone=one">Include File One</a>
</p>
<p>
<a href="#cgi.SCRIPT_NAME#?whichone=two">Include File Two</a>
</p>
<p>I loaded up file #url.whichone#:</p>
<script src="newJSInclude.cfm?whichone=#url.whichone#" type="text/javascript"></script>
</cfoutput>
</body>
</html>
In this case you can see we're using the script similar to how Google Ads might work. Wherever we place the script is where the dynamic content will be output.
And here is the new demo.
<head>
</head>
<body>
<cfoutput>
<p>
<a href="#cgi.SCRIPT_NAME#?whichone=one">Include File One</a>
</p>
<p>
<a href="#cgi.SCRIPT_NAME#?whichone=two">Include File Two</a>
</p>
<p>I loaded up file #url.whichone#:</p>
<script src="newJSInclude.cfm?whichone=#url.whichone#" type="text/javascript"></script>
</cfoutput>
</body>
</html>
