Friday, July 20, 2007

cfSnippetExecutor v0.1

How many time have you had to create ColdFusion pages in order to test some simple code. I have a dedicated virtual site to just test snippets. The directory is getting pretty full with random code files. The process so far has been: 1. Open the virtual site 2. Create an empty .cfm file 3. Write my code and save it 4. Go to the browser and run it Well, I'm tired of it! So here is an initial draft to remedy the tedious task of testing cf code snippets. I'm calling it "cfSnippetExecutor". You can download it at The idea is simple. Go to the cf page in your browser, paste in your code and hit "Run". The results of your code will be show up below. The only requirement is Prototype.js.
<cfsetting enablecfoutputonly="yes">
<!--- Setup default parameters and constants --->

<!--- Is this call to the page from javascript (Ajax) --->
<cfparam name="url.isAjaxCall" default="false" />
<cfparam name="url.testScript" default="" />

If this is an ajax call, get the tracking results trackingPageUrl specified above --->
<cfif url.isAjaxCall>
<cfif fileexists(expandpath('testInclude.cfm'))>
<cffile action="delete" file="#expandpath('testInclude.cfm')#" />

<cfsavecontent variable="testInclude">#url.testScript#</cfsavecontent>

<cfset testInclude = testInclude.replaceall("&lt;", "<") />
<cfset testInclude = testInclude.replaceall("&gt;", ">") />

<cffile action="write" file="#expandpath('testInclude.cfm')#" output="#testInclude#" />

<cfinclude template="./testInclude.cfm" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<script type="text/javascript" src="prototype.js"></script>
<style type="text/css">
div##statusContainer { position:absolute;left:0px;top:0px;width:100%;height:10px; }
div##statusMessageContainer { position:absolute;background-color:##000000;color:white;width:80px;font-family:Arial, Helvetica, sans-serif;padding:2px;left:0px;font-weight:700; }
<br /><br />
<!--- This is not an ajax call, so display a form --->
<form id="testForm" name="testForm" method="get">
<input type="hidden" id="isAjaxCall" name="isAjaxCall" value="true" />
<textarea name="testScript" cols="80" rows="10" id="testScript">
<cfset testVar = "yourmom" />
<cfdump var="#testVar#" />
<br />
<input type="submit" id="runScript" name="runScript" value="Run" />
<!-- Status container that will be shown message durring processing --->
<div id="statusContainer" style="display:none;">
<div id="statusMessageContainer">Loading...</div>
<br />
<!-- Results container that will be updated with the results of the tracking request --->
<div id="testResults"></div>
<script type="text/javascript">
onCreate: function() {
onComplete: function() {

// Add an event observer to the form's submit
GetResults('testForm', '#cgi.script_name#', 'testResults');

Function:  GetTrackingResults
  formID    string - the form id to be used in the request
  pageUrl    string - the page url to call for the results
  resultsContainer string - the container element to display the results in
Return Value: None
  Retrieves the contents of the results page with Ajax */
function GetResults(formID, pageUrl, resultsContainer)
var testScript = $('testScript').value.strip();

if (testScript != '') {
// Serialize the form parameters to pass them along as part of the form submission
var params = $(formID).serialize();

// Disable the form

// Empty the contents of the results container

// Make an ajax request with the 'get' method, passing it the serialized form
// and using 'ReportError' to show any errors
// and 'ProcessResults' to process the retrieved results
new Ajax.Updater(
 method: 'get',
 parameters: params,
 onFailure: function(request) { $(formID).enable(); },
 onSuccess: function() { $(formID).enable(); },
 evalScripts: true

Download cfSnippetExecutor
// //]]>