Ask a Jedi: Automatically selecting certain values with ColdFusion Ajax-bound controls

This post is more than 2 years old.

Shawn asked:

I am having an issue with a cfselect and I am wondering if you can help. I have a cfselect that binds to a CFC (to get value list) after another cfselect is changed. I need to have the cfselect (that is bound) to autoselect a particular value, if it exists in the returned values from the CFC. I have tried the onChange attribute of the cfselect (to see if it is triggered when the values are updated, but it appears that won't work. Do you know of any other way to achieve the autoselect?

I wasn't exactly sure what he meant here, so I countered with: So basically, your CFC may return A,B,C and you want code that says ,"Hey, if you ever return C, default to that being selected." That's what he meant.

So - this is a case where ColdFusion's Ajax makes something that is typically kinda easy a bit awkward. In jQuery I'd have code that binds to the first drop down and manually fires off the request to get the content for the second drop down. In the handler for it I'd notice "C" and select it. While you can do that with cfajaxproxy, I went with a route that may be simpler but... I don't know. It works - but I'd be happier with it in jQuery. ;)

<cfajaxproxy bind="javascript:mediachange({mediaid})"> <cfajaxproxy bind="javascript:artchange({artid})"> <head> <script> var mediaChanged = false; function mediachange(x) { console.log("media "+x); mediaChanged = true; } function artchange(x) { console.log("art "+x); if(mediaChanged) { //get my values var dd = document.getElementById('artid'); for(var i = 0; i < dd.length; i++){ if(dd.options[i].text == "Space"){ dd.selectedIndex = i; } } mediaChanged = false; } } </script> </head>

<cfform > <table> <tr> <td>Select Media Type:</td> <td><cfselect name="mediaid" id="mediaid" bind="cfc:art.getMedia()" bindonload="true" value="mediaid" display="mediatype" /></td> </tr> <tr> <td>Select Art:</td> <td><cfselect name="artid" bind="cfc:art.getArt({mediaid})" value="artid" display="artname" /></td> </tr> </table> </cfform>

In the example above I've got two related drop downs. Selecting an item in the first drop forces new data to load in the second. In order to handle the new "Look for C and auto select it" logic I used two cfajaxproxy tags. One runs a JavaScript function on changing the first drop down and the second one handles the other one. When a change is made to the first drop down I set a boolean value, mediachanged, to true. When the second one changes, I look for this value. If it is true, I grab the values and look for my special value. In this case I just hard coded the word "Space". That could be dynamic. I could also check the value and not the text. Notice though that I set mediachanged back to false. Why?

Well, I needed a way to know when the values in the second drop down were loaded. Whenever ColdFusion loads these values, it will select the first one, automatically 'changing' it and running artchange. I only need to care about this once - right after you change the media drop down. If you change the drop down yourself, I don't want to reset it back to Space. Hence the use of the variable.

So as I said - not terribly elegant - but it works.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Richard Migambi posted on 12/1/2010 at 12:12 PM

Hi Ray,

I have been trying to use this example and similar ones(from Ben Forta), these work fine on my machine but not on my host server. I always get a bind error:cannot find cfc(cfc name). Yet I can call this cfc using cfinvoke and it returns the values fine. I use CF9 same as the host server...any pointers please?

Comment 2 by Raymond Camden posted on 12/1/2010 at 5:54 PM

It should work if it can find the CFC. Do you have it online where I can see?

Comment 3 by Richard posted on 12/1/2010 at 6:05 PM

Hi Ray,

unfortunately no as it's protected by a password(it's a client site) - i have tried moving the page i call the cfc from to the webroot though and it works but still not what am looking to do

Comment 4 by Daniel Heighton posted on 12/1/2010 at 8:29 PM

I am working on stuff very similiar to this site, and may use this. I had a related problem though. If you were to use a javascript function to select certain items in the Media ID select. (In my case I made a hyperlink to select related elements). It seems the second dropdown doesn't get the change() event or something and never updates. Any thoughts on that?

Comment 5 by Raymond Camden posted on 12/1/2010 at 8:33 PM

@Richard: Not sure what to suggest. Does Firebug show anything odd? Like a redirect or an error or something else?

@Daniel: Yeah - thats an issue I've had for a LONG time. There has never been a way to 'force' a bind refresh. I blogged on it before I think - there is a function you can call, it's just not documented.

Comment 6 by Daniel Heighton posted on 12/1/2010 at 9:00 PM

@Raymond: I found your blog entry for this, incase anyone is interested: http://www.coldfusionjedi.c...

I'll look into using this today. In my own pages I was trying to force the change event with jquery's event functions, but it never worked. It also might help me get some Jquery plugins working overtop of the select statements (things to make mulitple selects easier to use, like ASM Select)

Comment 7 by Raymond Camden posted on 12/1/2010 at 9:05 PM

Can I just say that it is sad that you were able to find it and I could not - even though it's my own blog. ;)

Comment 8 by Daniel Heighton posted on 12/1/2010 at 10:52 PM

I just searched for "cfselect" I think it was in the first 3 results! Though the date explained why I hadn't read it since I didn't start following until this year sometime.

Very tangential to the post itself, but related since it comes down to usability with selects. I like to avoid using select-multiples for usability reasons. (Lots of non-techies struggle with them). But the power they give in using them for searching and forms is incredible.

I've been trying to use a JQuery plugin called ASM (Alternative Select Multiple) with the cfselect elements bound to CFCs. It never works. The Bind handler never seems to execute the change() event properly, or something but when I execute manually via a button or hyperlink it works just fine.

Ultimately, I think I just need to make the switch to using JQuery's Ajax with Coldfusion. Do you have any references on tutorials on making the jump.

Off to search your blog posts. So I may find it before you do ;)

Comment 9 by Richard Migambi posted on 12/2/2010 at 2:55 AM

Hi Ray, yes Firebug logs an error: "File not found: /cbincludes/select.cfc" (cbincludes is the includes mapping folder) but the cfc is there - and I am calling it from one of the include pages.
Do you have any Jquery script that does the same? shame I can't seem to get this working.

Comment 10 by Raymond Camden posted on 12/2/2010 at 3:08 AM

So if you go to

yoursite/cfincludes/select.cfc

do you get a response? Remember that for Ajax calls, CF mappings don't matter. It needs a CFC to hit.

Comment 11 by Raymond Camden posted on 12/2/2010 at 3:15 AM

@Daniel: I don't have anything specifically related to migrating from CFAJAX to jQuery. And also - it isn't a complete migration. CF's Ajax support is both in the plumbing area and the front end area. It's just the front end stuff I personally moved away from.