ColdFusion的搜索结果与复选框和jQuery过滤器 [英] Coldfusion Search Results Filter with checkboxes and Jquery
问题描述
我开发就业网站。在搜索结果页面我将URL传递变量ColdFusion组件返回的结果JSON格式，然后被输出与车把模板（感谢脚本由雷蒙德卡姆登可以找到的这里）。
I am developing a website for employment. On the search results page i pass the url variables to a Coldfusion component which returns the results in JSON format and then gets outputted with a handlebars template (thanks to a script by Raymond Camden which can be found here).
我想过滤使用复选框以从我的分贝不同类别的结果，有一个PHP的教程在网上这不正是我想我的搜索页面可以做，可以找到<一href="http://community.sitepoint.com/t/use-ajax-to-filter-mysql-results-with-multiple-checkbox-option/38018/53"相对=nofollow>这里
I would like to filter the results using checkboxes based on the various categories from my db, there is a PHP tutorial online which does exactly what i would like my search page to do and that can be found here
下面是我的脚本和车把模板：
Here is my is script and the handlebars template:
车把模板：
<script id="results-template" type="text/x-handlebars-template">
{{#each records}}
<div class="search-results">
<h3 class="text-left">{{job_title}}</h3>
<ul class="list-group">
<li class="list-group-item">DATE POSTED: {{job_date_post}}</li>
<li class="list-group-item">JOB REF NO: {{job_ref_no}}</li>
<li class="list-group-item">INDUSTRY: {{job_industry}}</li>
<li class="list-group-item">KEYWORDS: {{job_keywords}}</li>
<li class="list-group-item">JOB TYPE: {{job_type_id}}</li>
</ul>
</div>
{{/each}}
</script>
下面是Ajax调用：
<script>
function cfQueryNormalize(d) {
var result = [];
for(var i=0, len=d.DATA.length; i<len;i++) {
var item = {};
for(var k=0,innerlen=d.COLUMNS.length; k<innerlen; k++ ) {
item[d.COLUMNS[k].toLowerCase()] = d.DATA[i][k];
}
result.push(item);
}
return result;
}
$(document).ready(function() {
//Get the contents from the script block
var source = document.querySelector("#results-template").innerHTML;
//Compile that baby into a template
template = Handlebars.compile(source);
$.get("cfc/search-results.cfc?method=getresults&returnformat=json", {city:"<cfoutput>#url.city#</cfoutput>", Keywords:"<cfoutput>#url.keywords#</cfoutput>"}, function(res,code) {
var d = cfQueryNormalize(res);
var html = template({records:d});
$("#results").html(html);
}, "json");
});
</script>
下面是ColdFusion的组件：
Here is the Coldfusion Component:
<cffunction access="remote" name="getresults" output="false" >
<cfargument name="city" displayName="city" type="string" hint="Displays the Search Results" />
<cfargument name="keywords" displayName="keywords" type="string" hint="Displays the Search Results" />
<cfargument name="salary_id" displayName="salary_id" type="string" hint="Displays the Salary Results" />
<cfargument name="job_type_id" displayname="job_type_id" type="string" required="no">
<cfargument name="job_industry" displayname="job_industry" type="string" required="no">
<cfquery name="getresults" datasource="#datasource#" username="#username#" password="#password#">
SELECT jobs.job_id,
jobs.job_title,
jobs.job_type_id,
jobs.job_salary_id,
jobs.job_salary,
jobs.loc_country,
jobs.loc_region,
jobs.loc_city,
jobs.job_date_post,
jobs.job_ref_no,
jobs.job_detail_organization,
jobs.job_detail_requirements,
jobs.job_detail_description,
jobs.recruiter_id,
jobs.job_industry,
jobs.job_sub_industry,
jobs.job_keywords,
jobs.job_active,
jobs.job_applications,
jobs.job_views
FROM jobs
WHERE <cfif #Arguments.city# GT''>jobs.loc_city = #Arguments.city# AND</cfif> jobs.job_keywords LIKE '%#Arguments.keywords#%' <cfif Isdefined ('Arguments.salary_id')>AND jobs.job_salary_id = #Arguments.salary_id#</cfif>
</cfquery>
<cfreturn getresults>
</cffunction>
我的复选框将基于：
My checkboxes will be based on :
1）工资，他们将有一系列的年薪数额
1) Salary and they will have a range of yearly salary amounts
2）工作类型 - 永久，兼职，Tempory等
2) Job Type - Permanent, Part Time, Tempory etc
3）招聘行业。
结果都在数据库中相应的复选框领域。
The results all have the corresponding checkbox fields in the db.
我如何将能够根据我所作的选择点击一个或多个复选框，并细化导致ColdFusion组件？
How would i be able to click on one or more of the checkboxes and refine the results in the Coldfusion component based on the selection i have made?
任何帮助将是很大的AP preciated。
Any help would be greatly appreciated.
托默勒格：
这里是code为一组复选框，我有：
here is the code for the one group of checkboxes that i have:
<cfloop query="getstypes">
<li class="list-group-item">
<label><input class="job_salary#getstypes.job_salary_id#" type="checkbox" name="salary_id" id="salary_id" value="#getstypes.job_salary_id#"> #getcur.currency_symbol##numberformat(getstypes.job_salary_from, ",")#to #getcur.currency_symbol##numberformat(getstypes.job_salary_to, ",")#<span>(#getscount.recordcount#)</span></label>
</li>
</cfloop>
你能不能告知，如果这是正确的吗？
Could you advise if this is correct please?
推荐答案
首先，请修复您的CFC。
First off, please fix your CFC.
- 使用类型参数（即不
字符串时，他们实际上是数字） - 添加参数健全检查（范围/格式检查）
- 提供了可选的参数使用默认值（其实你并不真的需要反正可选参数）
- 使用
＆LT; cfqueryparam＆GT;而不是变量插值到SQL文本 - 定义
returnformat =json的就在＆LT; cffunction＆GT;
- use typed parameters (i.e. not
stringwhen they are in fact numeric) - add parameter sanity checking (range / format checks)
- provide useful defaults for the optional parameters (in fact, you don't really need optional parameters anyway)
- use
<cfqueryparam>instead of variable interpolation into the SQL text - define
returnformat="json"right in the<cffunction>
那么，在JavaScript：
then, in JavaScript:
// collect other API methods here, if there are any
var API = {
getresults: function(params) {
return $.get("cfc/search-results.cfc?method=getresults", params)
.then(cfQueryNormalize)
.fail(function () {
console.error("getresults failed:" , arguments);
});
}
};
$(function() {
var resultsTemplate = Handlebars.compile($("#results-template").text());
// on change of any of these input elements...
$("#city,#keywords,#salary_id,#job_type_id,#job_industry").change(function () {
// ...call the API with all values and render the result
API.getresults({
city: $("#city").val(),
keywords: $("#keywords").val(),
salary_id: $("#salary_id").val(),
job_type_id: $("#job_type_id").val(),
job_industry: $("#job_industry").val()
})
.then(renderWith(resultsTemplate))
.done(function (html) {
$("#result").html(html);
});
});
// trigger change event once to force initial loading
$("#city").trigger("change");
});
// helper functions ------------------------------------------------
function cfQueryNormalize(queryObject) {
return queryObject.DATA.map(function (row) {
var item = {};
queryObject.COLUMNS.forEach(function (col, c) {
item[col.toLowerCase()] = row[c];
});
return item;
});
}
function renderWith(template) {
return function (data) {
return template(data);
};
}
在你的HTML源代码创建相应的表单字段。
Create the appropriate form fields in your HTML source.
而不是写＃url.city＃您的JS源$ C $ C的，写你的城市价值属性表单字段。 （创建隐藏的表单字段，如果值并不意味着是用户可更换。）
Instead of writing #url.city# to your JS source code, write it to the value attribute of your city form field. (Create hidden form fields if a value is not meant to be user-changeable.)
推荐阅读理解。那么（）， .done（）和。失败（）我使用上述code：的jQuery递延对象和 jQuery的阿贾克斯。
Recommended reading to understand .then(), .done() and .fail() I am using in the above code: jQuery Deferred objects and jQuery ajax.
这篇关于ColdFusion的搜索结果与复选框和jQuery过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
