Filterrific gem is not refreshing or filtering my table as expected

Question

I am a relative novice with rails and I am trying to use the filterrific gem for some filtering. Basically I have the index page that shows a list of vendors and I want to be able to use the filtering to actively filter/sort the records. I was able to get through the tutorial and got through all of the errors, but for some reason when you enter data into the forms, nothing happens. It is not refreshing the view at all. Any thoughts on what I am doing wrong?

Vendor Model:

    filterrific(
        default_filter_params: { sorted_by: 'created_at_desc' },
        available_filters: [
          :sorted_by,
          :search_query,
          :with_vendor_type_id,
          :with_created_at_gte
        ]
      )

    scope :search_query, lambda { |query|

      return nil  if query.blank?
      terms = query.downcase.split(/\s+/)

      terms = terms.map { |e|
        (e.gsub('*', '%') + '%').gsub(/%+/, '%')
      }

      num_or_conds = 2
      where(
        terms.map { |term|
          "(LOWER(vendors.name) LIKE ? OR LOWER(vendors.bio) LIKE ?)"
        }.join(' AND '),
        *terms.map { |e| [e] * num_or_conds }.flatten
      )
    }

    scope :sorted_by, lambda { |sort_option|

  direction = (sort_option =~ /desc$/) ? 'desc' : 'asc'
      case sort_option.to_s
      when /^created_at_/
        order("vendors.created_at #{ direction }")
      when /^name_/
        order("LOWER(vendors.name) #{ direction }, LOWER(students.bio) #{ direction }")
      when /^vendor_type_title_/
        order("LOWER(vnedor_types.title) #{ direction }").includes(:vendor_type)
      else
        raise(ArgumentError, "Invalid sort option: #{ sort_option.inspect }")
      end
    }

    scope :with_vendor_type_id, lambda { |vendor_type_ids|
      where(with_vendor_type_id: [*vendor_type_ids])
    }

    scope :created_at_gte, lambda { |reference_time|
      where('vendors.created_at >= ?', reference_time)
    }


  def self.options_for_sorted_by
    [
      ['Name (a-z)', 'name_asc'],
      ['Registration date (newest first)', 'created_at_desc'],
      ['Registration date (oldest first)', 'created_at_asc'],
      ['Type(a-z)', 'vendor_type_id_asc']
    ]
  end

My Vendor Controller

 def index

    @filterrific = initialize_filterrific(
      Vendor,
      params[:filterrific],
      select_options: {
        sorted_by: Vendor.options_for_sorted_by,
        with_vendor_type_id: VendorType.options_for_select
      },
      persistence_id: 'shared_key',
      default_filter_params: {},
      available_filters: [],
    ) or return

    @vendors = @filterrific.find.page(params[:page])

    # Respond to html for initial page load and to js for AJAX filter updates.
    respond_to do |format|
      format.html
      format.js
    end

  rescue ActiveRecord::RecordNotFound => e
    puts "Had to reset filterrific params: #{ e.message }"
    redirect_to(reset_filterrific_url(format: :html)) and return
  end

My Index View

<h1>Vendors</h1>

<%= form_for_filterrific @filterrific do |f| %>
  <div>
    Search
    <%= f.text_field(
      :search_query,
      class: 'filterrific-periodically-observed'
    ) %>
  </div>
  <div>
    Vendor Type
    <%= f.select(
      :with_vendor_type_id,
      @filterrific.select_options[:with_vendor_type_id],
      { include_blank: '- Any -' }
    ) %>
  </div>
  <div>
    Registered after
    <%= f.text_field(:with_created_at_gte, class: 'js-datepicker') %>
  </div>
  <div>
    Sorted by
    <%= f.select(:sorted_by, @filterrific.select_options[:sorted_by]) %>
  </div>
  <div>
    <%= link_to(
      'Reset filters',
      reset_filterrific_url,
    ) %>
  </div>
<% end %>

<%= render(
  partial: 'vendors/list',
  locals: { vendors: @vendors }
) %>

My Partial

<div id="filterrific_results">

  <div>
    <%= page_entries_info vendors %>
  </div>

  <table>
    <tr>
      <th>Name</th>
      <th>User ID</th>
      <th>Country</th>
      <th>Registered at</th>
    </tr>
    <% vendors.each do |vendor| %>
      <tr>
        <td><%= link_to(vendor.name, vendor_path(vendor)) %></td>
        <td><%= vendor.user_id %></td>
        <td><%= vendor.vendor_type %></td>
        <td><%= vendor.created_at %></td>
      </tr>
    <% end %>
  </table>
</div>

<%= will_paginate vendors %>

The JS file

<%# app/views/vendor/index.js.erb %>
<% js = escape_javascript(
  render(partial: 'vendors/list', locals: { vendors: @vendors })
) %>
$("#filterrific_results").html("<%= js %>");

I got to the point where the from renders and got past all of the error messages, but its just not actually doing the filtering.

Answer 1

Include //= require filterrific/filterrific-jquery in 'app/assets/javascripts/application.js'