Multi-selects Related with CFAjaxProxy
by
Join the DZone community and get the full member experience.
Join For FreeAbout a year ago I wrote a post about how to do Multi-selects Related with AjaxCFC. Recently someone was saying they found it useful, and I mentioned that if I were doing it today I would likely just use ColdFusion 8's new <cfajaxproxy> tag. Therefore I have decided to show how the identical example could be done in ColdFusion 8. In the end, I think it is easier to understand and to implement.
Compared to the prior example , the component code is nearly identical, simply removing the extends attribute of the Ajax.cfc component. It also specifies the method as remote, whereby with AjaxCFC we could set it to private:
<cfcomponent>
<cffunction name="getFillQuery" output="no" access="remote" returntype="query">
<cfargument name="itemID" required="true" type="numeric" />
<!--- I am faking the query for test purposes --->
<cfset var selectQuery = queryNew("display,id") />
<!--- this would be where you do your real query --->
<cfset var i = 0 />
<cfloop from="1" to="5" index="i">
<cfset queryAddRow(selectQuery) />
<cfset querySetCell(selectQuery,"display","selected #arguments.itemID# option #i#") />
<cfset querySetCell(selectQuery,"id",i) />
</cfloop>
<cfreturn selectQuery />
</cffunction>
</cfcomponent>
As before, the component is very basic. I have a function that returns a query that, if this were real, would be filtered based upon an ID (or whatever criteria you want to send). Now, let's look at the form:
<cfajaxproxy cfc="selectBoxes" jsclassname="SelectBoxes">
<html>
<head>
<script language="javascript">
var formItemToFill;
function callFill(thisSelect,target) {
formItemToFill = target;
selectBoxes = new SelectBoxes();
selectBoxes.setCallbackHandler(fill);
selectBoxes.getFillQuery(thisSelect.options[thisSelect.selectedIndex].value);
}
function fill(r) {
var i = 0;
var foo2 = document.forms['myForm'].foo2;
foo2.options.length = 0;
for (i in r.DATA) {
foo2.options[i] = new Option(r.DATA[i][0],r.DATA[i][1]);
}
}
</script>
</head>
<body onload="callFill(document.forms['myForm'].foo1,'foo2');">
<form name="myForm">
<select name="foo1" onchange="callFill(this,'foo2');">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<br />
<select name="foo2" id="foo2"></select>
</form>
</body>
</html>
The initial <cfajaxproxy> tag establishes the component that I will be using and makes all the remote methods available (in case only the one) via JavaScript under the variable class name I specify (i.e. SelectBoxes). The callFill() function is called when a new option is selected in my foo1 select box or when the page loads to allow you to pre-select an option. The callFill() function simply creates an instance of our SelectBoxes proxy, establishes the callback method (fill()) and then calls the getFillQuery() function within the class. You may notice that I have set a global JavaScript variable here to allow you to easily set the target select box you would like to fill.
Once the data is returned, we remove all the existing options from foo2 and loop through the DATA array adding each result as a new option in the select box. Even without the built-in AjaxCFC utility functions, this is a very simple task.
As you can see, this is extremely easy once you are familiar with the new <cfajaxproxy> tag. You could also easily expand this to add additional related select boxes as necessary.
Opinions expressed by DZone contributors are their own.
Comments