jeudi 30 avril 2015

Coldfusion Search Results Filter with checkboxes and Jquery

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

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:

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>

Here is the ajax call:

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

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) Salary and they will have a range of yearly salary amounts

2) Job Type - Permanent, Part Time, Tempory etc

3) Job Industry.

The results all have the corresponding checkbox fields in the db.

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?

Any help would be greatly appreciated.




Aucun commentaire:

Enregistrer un commentaire