How do I filter posts with Ruby-on-Rails

Question

I have a job listing project set up and I want to be able to filter by several filters. I want to be able to have sidebar which can filter by certain elements - :city, :jobtype, and :contracttype

Is there a straightforward way to create radio buttons that will display the options available to the user i.e for :city a list of London, Manchester, Brighton etc which can be ticked to display those specific jobs?

I'm new to rails so having a hard time working out what I need to do, if anyone could explain what I need to do I'd really appreciate it!

My code is as follows:

index.html.erb -

<% @jobs.each do |job| %>
<div class="job">
    <h2><%= job.position %></h2>
    <p>Company: <%= job.company %></p>
    <p>Salary: <%= job.salary %></p>
    <p><a href="http://<%= job.companywebsite %>" target="_blank">Website: <%= job.companywebsite %></a></p>
    <p><a href="http://www.twitter.com/<%= job.companytwitter %>" target="_blank">Twitter: <%= job.companytwitter %></a></p>
    <p>Contract Type: <%= job.contract %></p>
    <p>City: <%= job.city %></p>
    <p>Expiry date: <%= job.expirydate %></p>
    <p>Job Type: <%= job.jobtype %></p>
    <p>Full Description:<br><br><%= job.description %></p>
    <p>How to apply: <%= job.apply %></p>
  </div>
<% end %>

job.rb -

class Job < ActiveRecord::Base
   validates :position, presence: true
   validates :company, presence: true
   validates :salary, presence: true
   validates :companywebsite, presence: true
   validates :companytwitter, presence: true
   validates :contract, presence: true
   validates :city, presence: true
   validates :expirydate, presence: true
   validates :jobtype, presence: true
   validates :description, presence: true
   validates :apply, presence: true
end

jobs_controller.erb -

class JobsController < ApplicationController
  def index
    @jobs = Job.page(params[:page]).per(25)
  end

  def new
    @job = Job.new
  end

  def create
    @job = Job.new(params.require(:job).permit(:position, :company, :salary, :companywebsite, :companytwitter, :contract, :city, :expirydate, :jobtype, :description, :apply ))
    if @job.save
      redirect_to root_path
    else
      render "new"
    end
  end
end

new.html.erb -

<%= simple_form_for @job, html: { multipart: true } do |form| %>
<%= form.input :position, input_html: { maxlength: 60 }, placeholder: "Job Position", label: false %>
<%= form.input :company, input_html: { maxlength: 60 }, placeholder: "Company name", label: false %>
<%= form.input :salary, input_html: { maxlength: 60 }, placeholder: "Salary", label: false %>
<%= form.input :companywebsite, input_html: { maxlength: 60 }, placeholder: "Company Website", label: false %>
<%= form.input :companytwitter, input_html: { maxlength: 60 }, placeholder: "Twitter Handle e.g @Hatch_Inc", label: false %>
<%= form.input :contract, input_html: { maxlength: 60 }, placeholder: "Contract Type", label: false %>
<%= form.input :city, input_html: { maxlength: 60 }, placeholder: "City", label: false %>
<%= form.input :expirydate, input_html: { maxlength: 60 }, placeholder: "Expiry date", label: false %>
<%= form.input :jobtype, input_html: { maxlength: 60 }, placeholder: "Job Type", label: false %>
<%= form.input :description, input_html: { maxlength: 60 }, placeholder: "Full job description", label: false %>
<%= form.input :apply, input_html: { maxlength: 60 }, placeholder: "How to apply", label: false %>
<%= form.button :submit %>
<% end %>

jpriebe · Answer 1 · 2015-02-13T15:53:08.637

Here's an example that uses JQuery to submit an AJAX request (so your page doesn't refresh every time a box is checked). In your view, you create a checkbox for each unique country. Jquery parameterizes the selected countries and submits them to your controller (specifying that you want to respond with JavaScript). A scope in your Jobs model applies the filter.

index.html.erb

<div id='job-list'>
 <% @jobs.each do |job| %>
<div class="job">
    <!-- Display your job here -->
  </div>
<% end %> 
</div>

<div id='countries'>
    <h4> Country Filter: </h4>
    <% @countries= Job.uniq.pluck(:country) %>
    <% @countries.each do |c| %>
        <br><input id="<%= c %>" type="checkbox" class="country-select" checked><label for="<%= c %>"> <%= c %> </label>
    <% end %>
</div>

index.js.erb

var jobs = $('#job-list');
jobs.empty();

<% @jobs.each do |job|%>
  jobs.append("<div class='job'><%= job %></div>"); // job display goes here
<% end %>

courses.coffee

getParams = ->
    params = ""
    countries = []
    $(".country-select:checked").each ->
      countries.push($(this).attr('id'))    
    params += "&#{$.param({countries: countries})}";

    return params

$('.country-select').on 'change', (event) =>    
  $.ajax "/jobs.js?"+getParams(),
    type: 'GET'
    dataType: 'script'

Jobs controller

class JobsController < ApplicationController

  respond_to :html, :js

  def index
    @jobs = Job.page(params[:page]).per(25).by_country(params[:countries])
  end

end

Job model

class Job < ActiveRecord::Base

  scope :by_country, -> (countries) { where(:country => (countries|| Course.uniq.pluck(:country)) ) }

end

Hi, thanks for your response. So if I didn't necessarily mind about having AJAX included, how would that affect things? So with the code you have provided, how would I change this to suit the filtering my :city, :jobtype and :contract strings from my code above? — user2498890, Feb 10 '15 at 10:09
You can define as many scopes as you want, i.e, one for city, jobtype, contract. You can still generate check boxes like in the code above. Instead of AJAX you can use `link_to`. See [this post](http://stackoverflow.com/questions/4292508/link-to-with-jquery-params-in-rails) on passing parameters the "Rails" way. — jpriebe, Feb 10 '15 at 14:37
where is the file index.js.erb? I have index.html.erb but not .js.erb? — user2498890, Feb 13 '15 at 12:08

How do I filter posts with Ruby-on-Rails

1 Answers1