title: Coldfusion Search Results Filter with checkboxes and Jquery
body: <p>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 <a href="http://www.raymondcamden.com/2012/05/11/Using-CFC-data-with-Handlebars" rel="nofollow">here</a>). </p>
  
  <p>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 <a href="http://community.sitepoint.com/t/use-ajax-to-filter-mysql-results-with-multiple-checkbox-option/38018/53" rel="nofollow">here</a></p>
  
  <p>Here is my is script and the handlebars template:</p>
  
  <p>handlebars template:</p>
  
  <pre><code> &lt;script id="results-template" type="text/x-handlebars-template"&gt;
      {{#each records}}
  
          &lt;div class="search-results"&gt;
               &lt;h3 class="text-left"&gt;{{job_title}}&lt;/h3&gt;
              &lt;ul class="list-group"&gt;
                  &lt;li class="list-group-item"&gt;DATE POSTED: {{job_date_post}}&lt;/li&gt;
                  &lt;li class="list-group-item"&gt;JOB REF NO: {{job_ref_no}}&lt;/li&gt;
                  &lt;li class="list-group-item"&gt;INDUSTRY: {{job_industry}}&lt;/li&gt;
                  &lt;li class="list-group-item"&gt;KEYWORDS: {{job_keywords}}&lt;/li&gt;
                  &lt;li class="list-group-item"&gt;JOB TYPE: {{job_type_id}}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
  
      {{/each}}
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the ajax call:   </p>
  
  <pre><code> &lt;script&gt;
   function cfQueryNormalize(d) {
      var result = [];
      for(var i=0, len=d.DATA.length; i&lt;len;i++) {
          var item = {};
          for(var k=0,innerlen=d.COLUMNS.length; k&lt;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&amp;returnformat=json", {city:"&lt;cfoutput&gt;#url.city#&lt;/cfoutput&gt;", Keywords:"&lt;cfoutput&gt;#url.keywords#&lt;/cfoutput&gt;"}, function(res,code) {
          var d = cfQueryNormalize(res);
          var html = template({records:d});
          $("#results").html(html);
      }, "json");
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the Coldfusion Component:</p>
  
  <pre><code> &lt;cffunction access="remote" name="getresults" output="false" &gt;
  
   &lt;cfargument name="city" displayName="city" type="string" hint="Displays the Search Results"  /&gt;
   &lt;cfargument name="keywords" displayName="keywords" type="string" hint="Displays the Search Results"  /&gt;
   &lt;cfargument name="salary_id" displayName="salary_id" type="string" hint="Displays the Salary Results" /&gt;
   &lt;cfargument name="job_type_id" displayname="job_type_id" type="string" required="no"&gt;
   &lt;cfargument name="job_industry" displayname="job_industry" type="string" required="no"&gt;
  
   &lt;cfquery name="getresults" datasource="#datasource#" username="#username#" password="#password#"&gt;
    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 &lt;cfif #Arguments.city# GT''&gt;jobs.loc_city = #Arguments.city# AND&lt;/cfif&gt; jobs.job_keywords LIKE '%#Arguments.keywords#%' &lt;cfif Isdefined ('Arguments.salary_id')&gt;AND jobs.job_salary_id = #Arguments.salary_id#&lt;/cfif&gt;
   &lt;/cfquery&gt;
  
   &lt;cfreturn getresults&gt; 
   &lt;/cffunction&gt;
  </code></pre>
  
  <p>My checkboxes will be based on :</p>
  
  <p>1) Salary and they will have a range of yearly salary amounts</p>
  
  <p>2) Job Type - Permanent, Part Time, Tempory etc</p>
  
  <p>3) Job Industry.</p>
  
  <p>The results all have the corresponding checkbox fields in the db. </p>
  
  <p>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?</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Tomalak:</p>
  
  <p>here is the code for the one group of checkboxes that i have:</p>
  
  <pre><code> &lt;cfloop query="getstypes"&gt;
   &lt;li class="list-group-item"&gt;
       &lt;label&gt;&lt;input class="job_salary#getstypes.job_salary_id#" type="checkbox" name="salary_id" id="salary_id" value="#getstypes.job_salary_id#"&gt; #getcur.currency_symbol##numberformat(getstypes.job_salary_from, ",")#to #getcur.currency_symbol##numberformat(getstypes.job_salary_to, ",")#&lt;span&gt;(#getscount.recordcount#)&lt;/span&gt;&lt;/label&gt;
       &lt;/li&gt;
  
   &lt;/cfloop&gt;
  </code></pre>
  
  <p>Could you advise if this is correct please?</p>