Populating a second dropdown using ColdFusion, jQuery, and Ajax

问题

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 that 2nd dropdown to use the jQuery Multiselect Widget where each value has a checkbox to select.

Here is what I last tried to do, and it just doesn't work.

    <form>
        <label for="lstTiers">Tier:</label>  
        <select name="lstTiers" id="lstTiers">    
            <option value="1">Tier 1</option>    
            <option value="2">Tier 2</option>    
            <option value="3">Tier 3</option>  
            <option value="4">Tier 4</option>  
            <option value="5">Tier 5</option>  
            <option value="6">Tier 6</option>  
            <option value="7">Tier 7</option>  
            <option value="8">Tier 8</option>  
            <option value="9">Tier 9</option>  
            <option value="10">Tier 10</option>  
            <option value="11">Tier 11</option>                                                                                                                  
            <option value="12">Tier 12</option>                                                                                                                  
            <option value="13">Tier 13</option>                                                                                                                  
            <option value="14">Tier 14</option>                                                                                                                                                                  
        </select>
        <label for="lstClients">Client:</label>  
        <select name="lstClients" id="lstClients">    
        </select>
        <input type="button" name="click_me" id="click_me" value="Click Me" />
    </form>

Here is one attempt at the jQuery:

        $('#click_me').click(function() { alert('here');
            $.ajax({
                url: 'Ajax-test.cfc?method=returnSomething',
                data: {
                    Tier: $('#lstTiers').val()
                },
                cache: false,
                dataType: 'json',
                success: function(data) { 
                    $('#lstClients').html(data);                        
                },

                // This fires when an error with ColdFusion occurs
                error: function() {

                    alert('An error has occured!');

                }

            });

        }); // End click()

I had also tried some other jQuery where I looped and built the options.

Finally, here's my cfc file:

<cfcomponent output="false">
    <cffunction access="remote" name="returnSomething" returntype="query" returnformat="json">
        <cfargument name="Tier" type="string" required="yes">
        <cfquery name="qryGetClients" datasource="ProjectGrid_Test">
            SELECT Div, ClientName FROM tblClientUpgradeClients WHERE Tier = #arguments.Tier# ORDER BY Div
        </cfquery>
        <cfreturn qryGetClients>
    <cffunction>
</cfcomponent>

If possible, that returned dropdown should allow user to multiselect using a checkbox. I've played with the jQuery Multiselect widget and I've had it work, but not on this dynamic query.

$('#lstClients).multiselect(
        {   noneSelectedText:"All Selected",
            show: ["fade"], 
            hide: ["fade"], 
            selectedList: 1, 
            multiple: true,
            uncheckAllText: ["Clear"]
        });

回答1:

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>