title: Filter products by categories using Rails & AJAX
body: <p><br>
  I need to create a page that will display products by chosen filters. For simplicity I will use product categories as filters.</p>
  
  <p>The page should have 2 areas:</p>
  
  <ol>
  <li>Where products are displayed. </li>
  <li>Where categories are displayed and a 'Clear All' button.
  <br><br></li>
  </ol>
  
  <p><strong>Scenario:</strong></p>
  
  <p>User visits the index page, all products are displayed.
  User clicks the 'Home category' and gets all the products that belong to this category. Then he clicks on the 'Shoes category' and now he sees all the products that belong to both categories ('Home category' or 'Shoes category'). User clicks on the 'Clear All' button (in order to reset the chosen categories), now all the products from all the categories are displayed.
  <br><br></p>
  
  <h1>My Code:</h1>
  
  <p>My models Product, Category, and join table causes_products.
  <br><br></p>
  
  <p><strong>Category</strong></p>
  
  <p><code>class Category &lt; ActiveRecord::Base
    has_and_belongs_to_many :products
  end</code>
  <br></p>
  
  <p><strong>Products</strong></p>
  
  <p><code>class Product &lt; ActiveRecord::Base
    has_and_belongs_to_many :categories
  end</code>
  <br></p>
  
  <p><strong>Products Controller:</strong></p>
  
  <pre><code>class ProductsController &lt; ApplicationController
    def index
      @products = Product.all
      @categories = Category.all
    end
    def from_category
      @products = Product.joins(:categories).where(categories: { id: params[:cat_id] })
      respond_to do |format|
        format.js
      end
    end
  end
  </code></pre>
  
  <p><br></p>
  
  <p><strong>products/index.html.erb:</strong></p>
  
  <pre><code>&lt;div class="grid"&gt;
    &lt;%= render 'sidebar_menu' %&gt;
    &lt;%= render partial: 'product_grid', locals: { products: @products} %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br></p>
  
  <p><strong>products/_sidebar_menu.html.erb:</strong></p>
  
  <pre><code>&lt;% @categories.each do | cat | %&gt;
  &lt;%= link_to cat.name, fetch_products_path(:cat_id =&gt; cat.id), :remote =&gt; true %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p><br></p>
  
  <p><strong>routes.rb</strong></p>
  
  <pre><code>get "/fetch_products" =&gt; 'products#from_category', as: 'fetch_products'
  </code></pre>
  
  <p><br></p>
  
  <p><strong>products/_products_grid.html.erb:</strong></p>
  
  <pre><code>&lt;div id="products_grid"&gt;
    &lt;%= render partial: 'products_list', locals: { products: products } %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br></p>
  
  <p><strong>products/_products_list.html.erb:</strong></p>
  
  <pre><code>&lt;% products.each do |product| %&gt;
      &lt;div class="product_box"&gt;
        product.name
      &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p><br></p>
  
  <p><strong>products/from_category.js.erb:</strong></p>
  
  <pre><code>$("#products_grid").html("&lt;%= escape_javascript(render partial: 'products_list', locals: { products: @selected } ) %&gt;");
  </code></pre>
  
  <p><br></p>
  
  <p><strong>The code works great only for one chosen category, but I would like it to be able to filter two or more categories as well. What changes do I need to make?</strong></p>
  
  <p>Thanks.</p>
  
  <p><br>
  Thank you <a href="https://stackoverflow.com/users/544825/max">@max</a> and <a href="https://stackoverflow.com/users/6186921/jeffrey-m-castro">@Jeffrey M Castro</a> for helping me with my <a href="https://stackoverflow.com/questions/36676443/rails-ajax-display-products-by-chosen-filters">previous question</a>.</p>
  
  <p>Thanks to sebastialonso for his article "<a href="https://coderwall.com/p/kqb3xq/rails-4-how-to-partials-ajax-dead-easy" rel="nofollow noreferrer">How to partials &amp; AJAX, dead easy</a>".</p>