Question

我正在开发一个就业网站。在搜索结果页面上，我将url变量传递给Coldfusion组件，该组件以JSON格式返回结果，然后使用手柄模板输出（感谢Raymond Camden的脚本，可以找到here）。

我想根据我的数据库中的各种类别使用复选框来过滤结果，在线有一个PHP教程，它完全按照我希望我的搜索页面进行操作，并且可以找到here < / p>

这是我的脚本和把手模板：

把手模板：

 <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组件：

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

我的复选框将基于：

1）薪水，他们将有一系列年薪

2）工作类型 - 永久，兼职，临时等

3）就业行业。

结果都在db中有相应的复选框字段。

我如何能够点击一个或多个复选框并根据我所做的选择优化Coldfusion组件中的结果？

非常感谢任何帮助。

托默勒格：

这是我拥有的一组复选框的代码：

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

你能告诉我这是否正确吗？

Answer 1

首先，请修理您的CFC。

使用类型参数（例如，当它们实际上是数字时不是string）
添加参数健全性检查（范围/格式检查）
为可选参数提供有用的默认值（事实上，您无论如何都不需要可选参数）
使用<cfqueryparam>代替变量插值到SQL文本
在returnformat="json"

<cffunction>

然后，在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源代码中创建相应的表单字段。

不要将#url.city#写入JS源代码，而是将其写入city表单字段的value属性。（如果值不是用户可更改的，则创建隐藏的表单字段。）

建议阅读以理解我在上述代码中使用的.then()，.done()和.fail()：jQuery Deferred objects和jQuery ajax。

Coldfusion搜索结果使用复选框和Jquery过滤

1 个答案: