Remove Debug Output From AJAX Requests in ColdFusion

Wed, 06 Jul 2011

ColdFusion’s debug output is great for development.

However, it is generally unwelcome in AJAX requests, especially when you’re expecting JSON data. This can cause JavaScript errors that break your application.

Luckily, ColdFusion gives you all the tools you need. You can turn off the debug output as a per request setting.

<cfsetting showDebugOutput= “false” />

I haven’t found a reason to have debug output on for AJAX events yet, so I turn them off. Browsers send over a nice header on AJAX events which ColdFusion can detect.

	<cffunction name= 	"isAJAXRequest" 
			output=	"false"
			access=	"private"
			hint=	"I check to see if the request came across with ajax headers">

		<cfif structKeyExists( getHTTPRequestData().headers , "X-Requested-With" )>
			<cfreturn true />

		</cfif>

		<cfreturn false />
		
	</cffunction>

Combining these two code blocks eliminates debug output from AJAX requests. Since cfsetting has a habit of being overwritten during requests, I choose to set it using Application.cfc’s onRequestEnd.

	<cffunction name= 		"onRequestEnd"
			returnType= 	"void"
			hint=		"I run on the end of requests (how clever).">
					
		<cfif isAJAXRequest()>
			<cfsetting showDebugOutput= "false"	enableCFOutputOnly= "true" />
			<cfcontent reset= "true" />
			<cfheader name= "Expires"	value= "#now()#" />
			<cfheader name= "Pragma"	value= "no-cache" />
			<cfoutput>#trim( request.AJAXResponse )#</cfoutput><cfabort />

		</cfif>
		
	</cffunction>

Note that I use request.AJAXResponse to store my response data. This allows me to make sure the AJAX response is properly trimmed.

Let’s see it in action. I created a small application with two pages to demonstrate.

Application.cfc

Everything I discussed previously is in the Application. It’s fairly simple.

json-page.cfm

This is the page that we’ll call via AJAX. It expects two variables and does some math.

index.cfm

I’m using jQuery to make my AJAX call as I’m most familiar with it.

The JavaScript is pretty straight forward. I bind a click event to JSONPageHandler. When the json-page link is clicked, JSONPageHandler will run and make an AJAX call. On either success or error we’ll see some data in the console.

The index page in the browser shows that ColdFusion debugging is turned on.

I removed showDebugOutput= “false” from the cfsetting tag in onRequestEnd for the first test so we can verify the problem and that the solution works.

Pressing the link shows an error event.
 

The statusText in the response object shows us that there’s a parse error. This is because the ColdFusion debug information came along with our JSON.

Typically I debug AJAX requests by looking at the XHR response, so let’s take a look.

You can see the JSON data looks fine, but there’s a bunch of html and css that’s the start of ColdFusion debug output.

I added showDebugOutput= “false” back into onRequestEnd. 

Pressing the link now shows a successful event.
 

Inspecting the XHR response
 

You see that only our JSON data was sent back to the browser.

If you caught my additions to onRequestEnd, then you’ll notice them in the XHR headers.

The Pragma and Expires headers help browsers to not cache the XHR request.

The code is available on GitHub for easier copying.
https://github.com/orangexception/Remove-Debug-Output-From-AJAX-Requests-in-ColdFusion

  • ColdFusion
  • AJAX
  • jQuery
  • orangexception