Populating a second dropdown using ColdFusion, jQuery, and Ajax

Question

I have one dropdown that has 14 values. Depending on the value chosen, it\'ll query a SQL Server database and return some clients to display in a second dropdown.

I want

Answer 1

Try that using cfcomponent and cfselect tag.

The below link may be useful.

http://forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-2-Related-Selects

Answer 2

I will do my best to use the vernacular of your coding in this example

note i am using coldfusion 9.0.1 and jquery 1.9+

jquery/javascript

           $('#lstTiers').on('change', function (){        
               $.ajax({
               url:'Ajax-test.cfm',
                       data: {'method': 'returnSomething',
                              'Tier': $(this).val(); },

               success: function(json){
                   if (json != '' )
                var vx='<option value="">All</option>';
                   $.each (json, function(k, v){

                       vx+='<option value="'+v.client_id+'">'+v.client_name+'</option>';            
                   });
                   $('#lstClients').html(vx);
                   }

               }); //end ajax()

       });

Coldfusion

<cffunction name="returnSomething" access="remote" output="false" returntype="json">
<cfargument name="Tier" type="string" required="yes">
    <cfset var qryGetClients= "">
        <cfquery name="qryGetClients" datasource="ProjectGrid_Test">
Select * from Clients WHERE Tier = #arguments.Tier# ORDER BY 1 
    </cfquery>
    <cfreturn qryGetClients>
</cffunction>

heres the thing, you need to see what return type json format is giving you, if it is coldfusion json, you would change the jquery each iteration to $.each (json.DATA, function(k, v){

i do things in the MVC way , and like my json to be standard non CF output, so heres an example of my code

controller

    <cffunction name="getRequestorsByEvent" access="remote" output="false" returntype="query">
        <cfargument name="nd_event_id" type="string" required="false">  
        <cfargument name="status" type="string" required="false">   
        <cfset var qRequestorsByEvent = "">
        <cfquery datasource="#application.DSN#" name="qRequestorsByEvent">
    select distinct d.init_contact_staff, initcap(e.pref_name_sort) name  from ben_activity_dtl d
    inner join entity e
    on e.id_number = d.init_contact_staff

    where d.nd_event_id =  <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.nd_event_id#">
    <cfif isDefined("arguments.status") and arguments.status neq "">
                                and d.request_status_code = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.status#"> 
                            </cfif>
    order by 2 asc    
        </cfquery>
        <cfreturn qRequestorsByEvent>
    </cffunction>

model

<cffunction name="RequestorsByEvent" output="false" hint="index">
    <cfset var rc=event.getcollection()>
    <cfset var returnArray = ArrayNew(1) />
    <cfset qRequestorsByEvent = getmodel("dynform").getRequestorsByEvent(rc.nd_event_id, Event.getValue("status", ''))> 
     <cfloop query="qRequestorsByEvent">
        <cfset RequestorsStruct = StructNew() />
        <cfset RequestorsStruct["init_contact_staff"] = init_contact_staff/>
        <cfset RequestorsStruct["name"] = name />

        <cfset ArrayAppend(returnArray,RequestorsStruct) />
    </cfloop>        

    <cfset event.renderData( type="json", data=returnArray ) />
</cffunction>