使用 Rails 和 AJAX 按类别过滤产品

Question

我需要创建一个页面，该页面将按所选过滤器显示产品。为简单起见，我将使用产品类别作为过滤器。

页面应该有2个区域：

1. 产品的展示位置。
2. 显示类别的位置和“全部清除”按钮。
   
   

场景：

用户访问索引页面，显示所有产品。 用户单击“首页类别”并获取属于该类别的所有产品。然后他点击“鞋类”，现在他看到了属于这两个类别（“家居类”或“鞋类”）的所有产品。用户单击“全部清除”按钮（以重置所选类别），现在显示所有类别的所有产品。

我的代码：

我的模型 Product、Category 和连接表 Cause_products。

类别

class Category < ActiveRecord::Base has_and_belongs_to_many :products end

产品

class Product < ActiveRecord::Base has_and_belongs_to_many :categories end

产品控制器：

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

产品/index.html.erb：

<div class="grid">
  <%= render 'sidebar_menu' %>
  <%= render partial: 'product_grid', locals: { products: @products} %>
</div>

产品/_sidebar_menu.html.erb：

<% @categories.each do | cat | %>
<%= link_to cat.name, fetch_products_path(:cat_id => cat.id), :remote => true %>
<% end %>

routes.rb

get "/fetch_products" => 'products#from_category', as: 'fetch_products'

products/_products_grid.html.erb：

<div id="products_grid">
  <%= render partial: 'products_list', locals: { products: products } %>
</div>

products/_products_list.html.erb：

<% products.each do |product| %>
    <div class="product_box">
      product.name
    </div>
<% end %>

products/from_category.js.erb：

$("#products_grid").html("<%= escape_javascript(render partial: 'products_list', locals: { products: @selected } ) %>");

该代码仅适用于一个选定的类别，但我希望它也能够过滤两个或多个类别。我需要进行哪些更改？

谢谢。

谢谢@max 和@Jeffrey M Castro 帮助我处理我的previous question。

感谢 sebastialonso 的文章“How to partials & AJAX, dead easy”。

Answer 1

对于您的 ajax 方法，您可以使用以下方法：

def from_category
  category_ids = params[:cat_ids]
  @products = Product.joins(:categories).where("categories.id IN (?)", category_ids)
  respond_to do |format|
    format.js
  end
end

要从您的表单中获取params[:cat_ids]，请参阅： Best way to get all selected checkboxes VALUES in jquery 或者 https://api.jquery.com/checked-selector/