Ruby on rails 铁路及；Ajax：通过选择的过滤器显示产品

我需要使用Ajax按所选类别显示产品；如果用户未选择类别，则显示所有产品。如果用户选择了一个或两个类别，则只应显示属于这些类别的产品。

例子：



我的模型产品、类别和联接表产品

类别

类别

产品

类产品

我正在寻找教程，发现了“Rails 4:”。我遵循了此教程，但出现了一个错误。我觉得我错过了一些东西。
请您就此向我提供建议或参考有用的信息来源。谢谢！

产品控制器：

class ProductsController < ApplicationController
  def index
    @products = Product.all
    @categories = Category.all
  end
  def from_category
    @selected = Product.where(:category_id => params[:cat_id])
    respond_to do |format|
      format.js
    end
  end
end

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

Product Load (3.2ms)  SELECT `products`.* FROM `products` WHERE `products`.`category_id` = '11'
Mysql2::Error: Unknown column 'products.category_id' in 'where clause': SELECT `products`.* FROM `products` WHERE `products`.`category_id` = '11'
    Rendered products/_products_list.html.erb (8.8ms)
    Rendered products/from_category.js.erb (12.2ms)
    Completed 500 Internal Server Error in 23ms (ActiveRecord: 3.5ms)


ActionView::Template::Error (Mysql2::Error: Unknown column 'products.category_id' in 'where clause': SELECT `products`.* FROM `products` WHERE `products`.`category_id` = '11'):
    1: <% products.each do |product| %>
    2:     <div class="product_box">
    3:     <%= product.name %>
    4:     </div>
  app/views/products/_products_list.html.erb:1:in `_app_views_products__products_list_html_erb___255698018512654633_70336949043820'
  app/views/products/from_category.js.erb:1:in `_app_views_products_from_category_js_erb___4172137050793767106_70336965664480'
  app/controllers/products_controller.rb:24:in `from_category'`

products/\u products\u grid.html.erb

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

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

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

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

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

多亏了@max的帮助，他的解决方案是更新控制器操作，它解决了错误，但在选择类别后，产品列表不会刷新

日志：

更新2： @max当我点击一个类别时，这就是我在回复中得到的：

$("#products_grid").html("  
  <div class=\"product_box\">\n      Bed\n    <\/div>\n
  <div class=\"product_box\">\n      Notebook\n    <\/div>\n
  <div class=\"product_box\">\n      Desk\n    <\/div>\n    
  <div class=\"product_box\">\n      Mug\n    <\/div>\n"
);

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

情景： 用户单击“主类别”，他将获得属于该类别的所有产品。然后他单击“鞋子类别”，现在他将看到属于这两个类别的所有产品（“主类别”或“鞋子类别”）。用户单击“全部清除”按钮（以重置所选类别），现在显示所有类别的所有产品

---

谢谢。

因为您有一个

has\u和\u属于\u许多

产品和类别之间的关系，所以您不能按

产品选择产品。类别id

因为两者之间的实际链接存储在

类别\u产品

联接表中

您需要使用联接并指定关联的条件：

@products = Product.joins(:categories)
                   .where(categories: { id: params[:cat_id] })

---

由于产品和类别之间存在

has\u和\u belient\u many

关系，因此不能按

产品选择产品。类别id

，因为两者之间的实际链接存储在

类别产品

联接表中

您需要使用联接并指定关联的条件：

@products = Product.joins(:categories)
                   .where(categories: { id: params[:cat_id] })

---

在@max的响应之后，使用浏览器检查器的网络选项卡检查服务器给出的JS响应是一种很好的做法

在代码中：

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

---

在@max的响应之后，使用浏览器检查器的网络选项卡检查服务器给出的JS响应是一种很好的做法

在代码中：

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

---

非常感谢@max的帮助！它解决了错误，但代码不起作用。选择类别后产品列表不会刷新。我该怎么办？首先检查rails日志，看看链接是否触发了正确的请求。非常感谢@max的帮助！它解决了错误，但代码不起作用。l选择类别后，产品列表未刷新。我该怎么办？首先检查rails日志，看看链接是否触发了正确的请求。查询运行正常-我将使用浏览器检查器中的“网络”选项卡检查rails的JS响应，看看它是否符合您的预期。查询正在运行正确-我会使用浏览器检查器中的“网络”选项卡来检查rails的JS响应，看看它是否符合您的期望。感谢您的帮助。该代码对于所选的一个类别非常有效，但我希望它也能够过滤两个或多个类别。我需要做哪些更改？您在这里询问的是实际情况这是一个完全不同的问题-通过接受解决您问题的答案并以新的起点提出新问题来帮助我们。我同意@max，但一般来说，您需要获得选中复选框的所有ID（使用

on change

或

on click

javascript代码）然后将它们传递给您的ajax方法。您的ajax方法现在应该接受一个数组，而不仅仅是一个类别id。如果您想要更多详细信息，我们建议您开始另一个问题。我创建了一个新问题。谢谢！感谢您的帮助。该代码对于所选的一个类别非常有效，但我希望它能够过滤两个或多个类别，因为嗯。我需要做什么改变？你在这里问的其实是一个完全不同的问题-帮助我们接受解决你问题的答案，并以这个新的起点问一个新问题。我同意@max，但一般来说，你需要获得所有复选框的ID（在更改时使用

或单击
时使用
javascript代码）并将它们传递给您的ajax方法。您的ajax方法现在应该接受一个数组，而不仅仅是一个类别id。如果您想要更多详细信息，我们建议您开始另一个问题。我创建了一个新问题。谢谢！
@products = Product.joins(:categories)
                   .where(categories: { id: params[:cat_id] })

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

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