« 8 reasons to like CFML's syntax over PHP's | Main | Configuring Foundeo Spell Checker to work with ColdFusion's FCKEditor »

How to get dynamic content on static HTML pages

When I first started my blog, I was using an old version of Coldfusion that couldn't support any of the modern blog projects. So, I installed MovableType instead, which publishes my blog as static HTML pages. Static code makes it kinda hard to put in all of those nice, dynamic touches that web developers are used to including in their pages, especially of the subject of the blog is often ColdFusion.

But I got it in my head that I wanted to put interesting and ever-changing quotes at the bottom of my blog entries, as I've seen on a few other major sites (you may have noticed the pithy quote at the bottom of this page). More experienced developers will be able to guess right away how I got it to work, but if you're curious about how I did it exactly, please read on.

The method I use to get dynamic content on the static HTML pages of my blog is to call an external script via the script tag:


<script language="JavaScript" src="http://webservices.mollerus.net/quote.cfm"></script>

What it returns is something like the following (the quote changes every time):


document.write('Always go to other people\'s funerals, otherwise they won\'t come to yours. -Yogi Berra');

The script does the job of supplying the quote and writing it to the page. But you'll note that the script I'm calling isn't from a static JavaScript file; instead, it's generated by a ColdFusion page. That's where the ability to produce a dynamic content comes in.

So to produce the script code, I just have a ColdFusion page which queries my database of quotes, selects one of them at random, and writes out the JavaScript code:

<cfsilent>
<!--- Get a list of quotes --->
<cfquery name="qQuotes" datasource="mwc" cachedwithin="#CreateTimespan(0, 6, 0, 0)#">
	SELECT quote, attribution
	FROM quotes
	ORDER BY quoteID ASC
</cfquery>

<!--- Select a quote at random --->
<cfset row = RandRange(1, qQuotes.recordCount) />
<cfsavecontent variable="VARIABLES.script"><cfoutput>document.write('#JSStringFormat(qQuotes.quote[row])#<cfif Len(Trim(qQuotes.attribution[row]))> -#JSStringFormat(qQuotes.attribution[row])#</cfif>');</cfoutput></cfsavecontent>
</cfsilent>

<!--- Output the JavaScript code --->
<cfcontent type="text/javascript">
<cfoutput>#VARIABLES.script#</cfoutput>

Obviously you can use this technique to get a lot more than just dynamic quotes into your static pages. You could pull ads, RSS feeds, widgets, or other content from all over the 'Net into your site. HTML pages can only call external content through script tags, but you can supply all kinds of scripts via your application code.

Post a comment


Type the characters you see in the picture above.