Using Cookies to Pass JavaScript Variables to ColdFusion

Jun 16

Understanding the differences between Javascript and ColdFusion

You can't directly pass a Javascript variable to ColdFusion as the two technologies are quite different.

ColdFusion is processed on the server side prior to delivering the content to the client. ColdFusion prepares the entire page and then renders it to the client before any client-side activity, such as Javascript, can take place.

Javascript is used on the client-side, and these variables are only available after ColdFusion initially delivers the HTML to the client. These two environments can not be running at the same time.

To pass Javascript variables to ColdFusion, you must an assistive technology, such as Ajax, or pass the Javascript variables to the server-side once the initial page has been rendered. Here we will focus on using Cookies to transfer information from the client-side to the server-side.

Real-world scenario

In Galaxie Blog, I developed a complex create post interface with TinyMce. There are scores of different interfaces depending upon the client's screen resolution and device. I could have used media queries and other client-side techniques to build the page, however, the enormous complexity of the various interfaces made it much easier to design these interfaces on the server-side.

To accomplish this, I sniffed the client's device by intercepting the HTTP user agent string with ColdFusion scripts provided by detectmobilebrowers.com. This works flawlessly and detects mobile and desktop devices but does not work with newer iPads. Unfortunately, Apple recently removed any identifying strings and made it impossible to detect iPads using the HTTP user agent string.To determine iPad clients, I would have to use Javascript to obtain the screen resolution and pass it to ColdFusion.

Using cookies to pass Javascript variables to ColdFusion

You can use cookies to transfer information from Javascript to ColdFusion. This particular technique requires that the user land on a page, such as a login form, to obtain the needed information from Javascript.

In my scenario, the user will first hit a login page. The login page has the following Javascripts to set a cookie that ColdFusion can read. Note the path argument ('/') at the end of the script. You must store the cookie that Javascript creates in the root directory for ColdFusion to be able to read the cookie.

Logic on the client-side

/* Cookie functions. The original author of this script is unknown */
function setCookie(name,value,days) {
	var expires = "";
	if (days) {
		var date = new Date();
		date.setTime(date.getTime() + (days*24*60*60*1000));
		expires = "; expires=" + date.toUTCString();
	}
	// The path must be stored in the root in order for ColdFusion to read these cookies
	document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

Once the user hits the login page, set a cookie using the Javascript function above. We are naming our cookies 'screenWidth' and 'screenHeight' and passing the width and the height of the device determined by Javascript and keeping the cookie alive for one day.

// Set a cookie indicating the screen size. We are going to use this to determine what interfaces to use when the the screens are narrow.
// (setCookie(name,value,days))
setCookie('screenWidth',$(window).width(),1);
setCookie('screenHeight',$(window).height(),1);

Server-side logic using ColdFusion

To read the cookie using ColdFusion, it is best to use a try block to read the cookie. The syntax to read the cookie from Javascript is different than the native ColdFusion cookie methods- note the brackets surrounding the cookie name.

<!--- Get client properties. This will be used to set the interfaces depending upon the screen size --->
<cftry>
	<cfset screenHeight = cookie['screenHeight']>
	<cfset screenWidth = cookie['screenWidth']>
	<cfcatch type="any">
		<cfset screenHeight = 9999>
		<cfset screenWidth = 9999>	   
	</cfcatch>
</cftry>
<!--- Outputting the screen sizes --->
<cfoutput>
screenHeight: #screenHeight#
screenWidth: #screenWidth#
</cfoutput>

You can use this particular method to transfer any variable obtained by Javascript to ColdFusion as long as you have the user first hit a landing page.

I may write other articles using other methods, such as Ajax, in the future.

#{title}