hacer - Llenar un segundo menú desplegable con ColdFusion, jQuery y Ajax
menu desplegable jquery vertical (2)
Haré todo lo posible para utilizar la lengua vernácula de su codificación en este ejemplo
nota que estoy usando coldfusion 9.0.1 y 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()
});
Fusión fría
<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>
Aquí está, necesitas ver qué tipo de retorno te está dando el formato json, si es coldfusion json, cambiarías el jquery de cada iteración a $.each (json.DATA, function(k, v){
Hago cosas de la manera MVC, y como mi json es la salida estándar sin CF, así que aquí está un ejemplo de mi código
controlador
<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>
modelo
<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>
Tengo un menú desplegable que tiene 14 valores. Dependiendo del valor elegido, consultará una base de datos de SQL Server y devolverá algunos clientes para mostrarlos en un segundo menú desplegable.
Quiero que el segundo menú desplegable use el widget jQuery Multiselect donde cada valor tiene una casilla de verificación para seleccionar.
Esto es lo que intenté hacer por última vez, y simplemente no funciona.
<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>
Aquí hay un intento en 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()
También probé con otras jQuery donde hice un bucle y construí las opciones.
Finalmente, aquí está mi archivo cfc:
<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>
Si es posible, ese menú desplegable devuelto debería permitirle al usuario realizar una selección múltiple usando una casilla de verificación. He jugado con el widget jQuery Multiselect y he tenido el trabajo, pero no en esta consulta dinámica.
$(''#lstClients).multiselect(
{ noneSelectedText:"All Selected",
show: ["fade"],
hide: ["fade"],
selectedList: 1,
multiple: true,
uncheckAllText: ["Clear"]
});
Pruébalo usando la etiqueta cfcomponent y cfselect.
El siguiente enlace puede ser útil.
http://forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-2-Related-Selects