created: April 04, 2008 - modified: June 10, 2008

Problem addressed

This article provides a workaround allowing you to specify the selected items for cfselect when using the new AJAX bind function.

Solution

My example is a modification of the cfselect example taken from livedocs:

Upload fixColdfusionAjax.js to your site, and call the file using the script tag

<head>
 <title>your page</title>
 <script src="/{path}/fixColdfusionAjax.js></script>
</head>

<cffunction name="getValues" access="remote">
 <cfscript>
  VAR LOCAL = structNew();
  LOCAL.array = arrayNew(2);
  LOCAL.array[1][1] = "0";
  LOCAL.array[1][2] = "-- relationships --";
  LOCAL.array[1][3] = false; // not selected
  LOCAL.array[2][1] = "1";
  LOCAL.array[2][2] = "author";
  LOCAL.array[2][3] = true; // selected 
  LOCAL.array[3][1] = "2";
  LOCAL.array[3][2] = "publisher";
  LOCAL.array[3][3] = true; // selected (can have multiple values selected)
  return LOCAL.array;
 </cfscript>
</cffunction>

I will show a live example once I migrate this site to CF 8

Background

I've been slowly working on a new version of this site, and as part of the back end I wanted to use Coldfusion's new AJAX features for <CFForm>.

I quickly discovered that for some really bizarre reason, when you use the "bind" attribute to get the values for an option list <CFSELECT> you can't indicate which options are selected.

I searched the net and found some work around's by Todd Sharp and Ray Camdem but they seemed a bit awkward to me.

So, I decided to take a look at Coldfusion's AJAX javascript. After some digging I found out the problem was really simple to fix.

I've created the file fixColdfusionAjax.js, that contains JavaScript that over-rides a function from Coldfusion's cfajax.js code library to add support for selecting options