Secondary CFSelect w/Ajax

[kodemonki]

I've searched the web, and a number of awesome tutorials, but I keep getting stuck on my bind failing, but I can't figure out why! I am using the name of the preceeding cfselect for the current method argument, I've checked that both cfselects work correctly when the second does not depend on the first. It looks like the binding happens AFTER the error, which I'm not sure how to fix. And it also looks like it's binding to all the data returned from the first cfselect call, instead of just the default selected id. If anyone can show me the error of my ways, I'd very much appreciate it!

[Matt Gifford]

Perhaps not answering your question in regards to solving this code (and I apologise for that), but one remedy which I know works (I've written similar code to produce 'related select boxes') is to use jQuery.

Make a request to retrieve json formatted query results, which can populate the select box.

A second jQuery function can then be run onChange of the first select box, which will do the same thing, but will send off the id or whatever param you need to include in the second query.
Once the json results are back, jQuery will again populate the second select box with returned options/data.

A good starting point is here: http://www.coldfusionjedi.com/index.cfm/2008/12/16/Ask-a-Jedi-Mixing-ColdFusion-8-binding-with-jQuer...

If you need any more help, let me know.

From one monkey to another.

Cheers

[kodemonki]

Thanks. I tried that link and can't even get the first dropdown in the example to work correctly . . .

[Newsgroup_User]

try this a work-around i have used before:

1) add this to the HEAD section of your page:
<cfajaxproxy bind="javascript:test({concern_id},'[#form.concern_id#]')">
<script type="text/javascript">
var imdone = false;
function test(x,val) {
if(!imdone) {
var dd = document.getElementById('concern_id');
valArr = ColdFusion.JSON.decode(val);
for(var i = 0; i < dd.length; i++){
for(var j = 0; j < valArr.length; j++){
if(dd.options .value == valArr){
dd.options.selected = true;
}
}
}
imdone = true;
}
}
</script>

2) add bindonload="true" to your second cfselect

the only visible difference bettween my case and yours is that my cfc
function was returning QUERY and yours returns an array - try changing
the returntype in your cfc function if the above does not work...


Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

[kodemonki]

It says that concern_id is undefined in Form. I take it this means the AJAX request never happened?

[kodemonki]

When I add <cfif not isDefined("concern_id")><cfset concern_id = 16></cfif> it then shows the error:
Error invoking CFC /internal/dealers/call_log_2/calls.cfc : The CONCERN_ID argument passed to the get_concerns function is not of type numeric.

I tried looking at the source code, but the options don't even come up!

[kodemonki]

From cfdebug:

info:bind: Assigned bind value: '16,Special Projects,36,QA' to type_id.value

This looks like the value is '16,Special Projects,36,QA' instead of just the first id of the first value in the array.

[Newsgroup_User]

where are you adding this <cfif not isdefined... block and why???

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

[Newsgroup_User]

oh, you must mean "TYPE_ID" and not "CONCENR_ID"?

looking at your original post, it shows that the value assigned to your
"type_id" cfselect is '16,Special Projects,36,QA', which is obviously
not numeric...

i suggest you stop messing with arrays and just return queries from your
cfc functions - that's all you need for the selects to work.

change your cfc functions to the following:


<cffunction name="call_types" access="remote" returntype="QUERY">
<cfset var data = querynew("concern_type, type_id", "varchar, integer")>
<cfset queryAddRow(data)>
<cfset querySetCell(data,"concern_type", "Special Projects")>
<cfset querySetCell(data, "type_id", 16)>
<cfset queryAddRow(data)>
<cfset querySetCell(data,"concern_type", "QA")>
<cfset querySetCell(data, "type_id", 36)>
<cfreturn data>
</cffunction>

<cffunction name="get_concerns" access="remote" returntype="QUERY">
<cfargument name="type_id" type="numeric" required="yes">
<cfset var data = "">
<cfquery name="data" datasource="#dsn#">
SELECT concern, concern_id
FROM pbr_concerns_masters
WHERE concern_type = <cfqueryparam cfsqltype="cf_sql_integer"
value="#arguments.type_id#">
ORDER BY concern
</cfquery>
<cfreturn data>
</cffunction>



Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

[kodemonki · Accepted solution]

Thank you Azadi, that seemed to improve things a bit.

I have also added bindAttribute, display, and value attributes to both cfselects. I'm sure some of these are redundant, but whatever, it works on a standalone test page, and mixed in with my working page in Firefox. Unfortunately, it is failing to bind in IE. I will continue to investigate.

[kodemonki]

This was fixed by removing a form that was inside the cfform (yay legacy code).

I'm not sure how Ben Forta's example ( http://www.forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-2-Related-Selects) worked without the other cfselect attributes, but I'm glad it's worked for so many people, and that I've finally got it working!

Thanks to everyone for their help.