Multi-selects Related with CFAjaxProxy
<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.
