Populate SELECTLIST with AJAX [duplicate] - 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 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"]
});

Answer 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>

Answer 2

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