Refreshing A Bound CFSelect
Posted By : todd sharp Posted At : October 22, 2007 9:58 AM Posted In: ColdFusion
9
Matt Woodward posted last night an interesting issue with using binding and a cfselect (I'd link to it here but his site appears to be down at the moment. If anyone has a way to contact him please do...). I posted a few foolish untested suggestions in his comments to that post (hey, it was midnight and I couldn't see straight from all the tears I was shedding after watching my Indians meltdown and blow a 3-1 series lead) but this morning I decided to dig into it to see if it could be done.
Turns out it can be done, but only through some creative binding and tapping into an undocumented function which IMO should be documented - are you listening Adobe? ;) So we start out with a bound select. In this case I'll use a JavaScript bind and an ajaxproxy to my component to get the data:
Which hooks up to the ajaxproxy:
<script>
getArt = function(){
var a = new artClass();
var artists = a.getArtistsForSelect();
return artists;
}
</script>
Simple enough. The getArt() function returns a query to the select which uses the 'value' and 'display' columns as defined in the cfselect tag. Now here's where the trickery comes in. I have a simple cfinput that calls a refresh() javascript funciton. Here's the function:
ColdFusion.Bind.assignValue('testSel','value', getArt())
}
This calls the undocumented ColdFusion.Bind.assignValue function and passes three things: The element that needs the bind value ('testSel'), the attribute to assign the value to ('value') and the function that returns the data (getArt()). So calling this function will programatically refresh the select list. When would you need to do this? Well in Matt's example he had a cfwindow on the page that created new values for the select list. He wanted a way to explicitly refresh the select list when the window was hidden so this would do the trick.
As I said above, this function - as well as a few other Ajax related JS functions should be documented in my opinion. Either that or a new ColdFusion.Bind.refresh() function should be added for cases such as this.
Not sure what happened to my site--it's running now but the blog post in question has disappeared. It's as if my whole VPS got rolled back a day or something. Looking into it now so thanks for the heads up.
I reworked this a bit to handle url bindings too. Don't know how this could be done with all them neat CF Ajax functions so I just took
a XMLHttpRequest. You decide what it's worth.
Say you had a http request that returns a JSON string of artists (in my case: index.cfm?event=artists.listJSON), then you could do like so:
<cfselect bind="url:index.cfm?event=artists.listJSON" id="testSel" bindOnLoad="true" name="testsel" value="firstname" display="firstname" />
<button type="button" onclick="refresh()">refresh me!</button>
<script type="text/javascript>
refresh= function() {
var xhr = new XMLHttpRequest();
// use POST to prevent caching
xhr.open('POST', 'index.cfm?event=artists.listJSON', true);
xhr.onreadystatechange = function (evt) {
if (xhr.readyState == 4) {
if(xhr.status == 200) {
resp = eval('(' + xhr.responseText + ')');
ColdFusion.Bind.assignValue('testSel','value', resp);
}
else
alert("XMLHttpRequest error");
return null;
}
};
xhr.send(null);
}
</script>
regards, Richard
Thanks,
Russ
Using cfajaxproxy, it is pretty easy.
<cfajaxproxy cfc="<cfc file name>" jsclassname="myCFC">
then, in your javascript, you can use
var my_cfc= new myCFC();
ColdFusion.Bind.assignValue('<element_id>', <value>, my_cfc.<cfc_method>());
where stuff in "<>" you will have to replace with your own names and values.
Cheer,
Greg
Do you have to do anything different if you are using a different query column for the "value" and "display" attributes?
Thanks,
Scott
I have a bound cfselect (<cfselect name="KeywordType"
bind="cfc:#Application.inccfcdir#Keywords.KeywordTypes()"
bindonload="true" display="KeywordTypeDesc" value="KeywordType" />) That I need to refresh when a cfwindow is closed - cfwindow contains a form to add data to the table that is bound to cfselect. I can't seem to get it to work. Any help is appreciated.
Thanks
I have twolist:
<cfselect name="actioningDD" id="actioningDD" bind="cfc:rfi.cfcs.RFIs.rfi_getActioningItems()" bindonload="true"/>
the other: <cfselect name="elementDD" id="elementDD" bind="cfc:rfi.cfcs.RFIs.ref_getElements({actioningDD})" />
in a js file I set the first list using :
$("#actioningDD").val(actioning);
ColdFusion.Event.callBindHandlers('actioningDD',null,'change');
but when I set the value of the second using :
$("#elementDD").val(element);
it does not set the list to that item as being selected.
ANy ideas?