Delbridge.Org

ColdFusion and jQuery complement each other quite nicely.  The first facilitates all manner of back-end über-awesomeness while the other, comparatively new kid on the block, puts some bling on your front-end, so to speak.  Thankfully, getting these two to share data through Document Object Model (DOM) elements is easy, if altogether undocumented.  And by "undocumented," I of course mean that it's well-documented, but in nomenclature that evaded this seasoned ColdFusion developer for hours of tedious Google searching.

In a word, the solution is "custom data attributes."  Okay, that's three words, but still shorter than the technical alternative:  "custom non-visible data-* attributes."  New in HTML 5, we are permitted to litter our HTML tags with all manner of custom parameters.  In fact, any parameter beginning with "data-" and at least one additional alphanumeric character is fair game.  And if you've ever wanted to cram two or more name/value pairs into an ID or CLASS parameter, then you already know just how valuable this addition can be.

In practice, it looks like this:

<ul id="books">
  <li class="inventory" data-sold="63" data-unsold="57">jQuery Cookbook</li>
  <li class="inventory" data-sold="97" data-unsold="13">JavaScript, the Definitive Guide</li>
  <li class="inventory" data-sold="16" data-unsold="12">Adobe ColdFusion Anthology</li>
</ul> 

...and with jQuery's .attr() method, you can pull the parameters, data-sold and data-unsold, into your script in order to perform all manner of logical operations.  Maybe your favorite jQuery plugin will crunch the data into an interactive chart.

SAMPLE ColdFusion CODE:  Pre-jQuery

Now that I've spoiled the surprise, you're probably dashing off to your stalled code and a fresh energy drink.  But for those who've chosen to stick around, even if only to be polite, I'll demonstrate ColdFusion-to-jQuery communication with a simple form - it's an inventory re-ordering form that performs two simple functions:

• Queries a database for all inventory items
• Displays a text input form field for each item, where staff can submit item re-order quantities.

Omitting the HTML framework and ignoring any syntactical errors - the code is untested - our template looks like this:

<!--- ************************************************************ --->
<!--- Get inventory items, descriptions, quantity on hand, and     --->
<!---   calculated quantity sold over last 30 days.                --->
<!--- ************************************************************ --->

<cfquery name="Get_Items" datasource="#MyDSN#">
    SELECT Items.Item_ID, Items.Name, Items.Qty_Unsold, COUNT(Sales.Item_ID) AS Qty_Sold
    FROM Items LEFT OUTER JOIN
        Sales ON Items.Item_ID = Sales.Item_ID
    WHERE Sales.Timestamp >= <cfqueryparam value="#Now()-30#" cfsqltype="cf_sql_timestamp">
    ORDER BY Name
</cfquery>

<!--- ************************************************************ --->
<!--- Display re-order form                                        --->
<!--- ************************************************************ --->

<form action="re_order_items.cfm" method="post">

    <cfoutput query="Get_Items">
    
        #Get_Items.Name#: <input class="inventory" type="text" name="Item_#Get_Items.Item_ID#" value="#Get_Items.Qty_Sold#"><br />
    
    </cfoutput>
    
    <input type="submit" name="Submit" value="submit">

</form>

Sample CF Code:  With Custom Data Attributes and jQuery

Now, let's throw some jQuery into the mix.  If the user submits a re-order value that is too low to meet historical demand, then we'll turn the background of the form field red, warning the user to increase the re-order volume.  To do this, our very simple jQuery script will require two additional parameters from each ColdFusion-generated <input class="inventory"> element:  the quantity on hand (#Get_Items.Qty_Unsold#) and the quantity sold in the last 30 days (#Get_Items.Qty_Sold#).

Inserting two custom data attributes and a little jQuery produces the updated code block, below.  For your convenience, changes from the prior code block are denoted in red.

<!--- ************************************************************ --->
<!--- Get inventory items, descriptions, quantity on hand, and     --->
<!---   calculated quantity sold over last 30 days.                --->
<!--- ************************************************************ --->

<cfquery name="Get_Items" datasource="#MyDSN#">
    SELECT Items.Item_ID, Items.Name, Items.Qty_Unsold, COUNT(Sales.Item_ID) AS Qty_Sold
    FROM Items LEFT OUTER JOIN
        Sales ON Items.Item_ID = Sales.Item_ID
    WHERE Sales.Timestamp >= <cfqueryparam value="#Now()-30#" cfsqltype="cf_sql_timestamp">
    ORDER BY Name
</cfquery>

<!--- ************************************************************ --->
<!--- Display re-order form                                        --->
<!--- ************************************************************ --->

<form action="re_order_items.cfm" method="post">

    <cfoutput query="Get_Items">
    
        #Get_Items.Name#: <input class="inventory" data-qty-unsold="#Get_Items.Qty_Unsold#" data-qty-sold="#Get_Items.Qty_Sold#" type="text" name="Item_#Get_Items.Item_ID#" value="#Get_Items.Qty_Sold#"><br />
    
    </cfoutput>
    
    <input type="submit" name="Submit" value="submit">

</form>

<!--- ************************************************************ --->
<!--- When changing any input field (item reorder volume), com-    --->
<!---   pare against volume sold in last 30 days and unsold stock  --->
<!---   on hand to be sure we can meet demand this month.  If      --->
<!---   lower than the difference of volume sold and stock on      --->
<!---   hand, then turn the background of the input field red via  --->
<!---   Cascading Style Sheets (CSS) class '.red', defined in      --->
<!---   main.css.                                                  --->
<!--- ************************************************************ --->

<script>
	$(".inventory").change(function () {
		var qtySold = $(this).attr('data-qty-sold');
		var qtyUnsold = $(this).attr('data-qty-unsold');
		var qtyMinimum = qtySold - qtyUnsold;
		if($(this).val() < qtyMinimum) {
			$(this).toggleClass("red", 1);
		}
		else {
			$(this).toggleClass("red", 0);
		}
	});
</script>

That's all there is to it.  And, in the interest of completeness, should you wish to store values calculated in jQuery back into your DOM element, simply use jQuery's .attr() method again.  Not only can this method update existing attributes, but can also create new attributes on the fly, for a veritable deluge of "data-*" parameters.  Go crazy.

I hope this information has been helpful.  If so, you can follow me on Twitter at @circa3000.  And, of course, please consider Circa 3000 for your ColdFusion hosting needs.  I look forward to hearing from you!