Javascript 我是否需要Ajax或其他东西来将不同的erb内容放入我的选项卡中？

我想在索引页中有一些选项卡。 每个选项卡都应为食品模型呈现不同的类别

这些选项卡工作正常，但具有静态内容

我有两张桌子：

Foods, Categories

我的食物表中有一列：category\u id。

我的联想是：

食物有一个类别，而类别有很多食物。

因此，当单击其中一个选项卡时，必须传递一个category_id，以便它知道要呈现什么内容

我不知道我需要如何创建我的视图（可能还有一个范围？）。这是我第一次这样做

这是其中一个选项卡的代码：

<ul class="accordion-tabs">
  <li class="tab-header-and-content">
    <a href="#" class="is-active tab-link">Entrantes</a>
    <div class="tab-content row">
     <% @foods.by_category(params[1]).each do |food| %>
      <%= render "food_card" %>
     <% end %>
    </div>
  </li>

我的索引视图（食品）

---

如果每种食品只有一个类别，则应使用“属于”类别关联

在分类中，你可以把它和许多食物放在一起

在类别控制器的“显示”视图中，您可以按如下方式拖动食物：

<% @category.foods.each do |food| %>
 <%= food.title %>
<% end %>

<div class="categories">
   <% @categories.each do |tab| %>
      <%= link_to tab.name, category_show_path(tab) %>
   <% end %>
</div>

#app/assets/javascripts/application.js
$(".categories").on("click", "a", function() {
   $.ajax({
       url: $(this).attr("href"),
       dataType: "json",
       success: function(data) {
           $(".category").html(data)
       }
   });
});

---

参数

<ul class="accordion-tabs">
<div class="categories">
  <li class="tab-header-and-content">
   <% @categories.each do |tab| %>
      <%= link_to tab.name, category_show_path(tab), class: "tab-link" %>
   <% end %>
   </li>
</div>
</ul>
</article>

<script>
$(".categories").on("click", "a", function() {
   $.ajax({
       url: $(this).attr("href"),
       dataType: "json",
       success: function(data) {
           $(".category").html(data)
       }
   });
});
</script>

如果选项卡在单个请求中，则无法将

参数传递给选项卡<代码>参数

通过或在后台发送，为您的应用程序后端提供变量：

参数用于在向控制器发出请求后操作响应。在您的情况下，如果文件位于同一页面上，则需要在ajax请求中使用它们来提取相关的

类别

内容

--

Ajax

正如

@mavis

所述，您需要将模型设置为：

#app/models/food.rb
Class Food < ActiveRecord::Base
   belongs_to :category
end

#app/models/category.rb
Class Category < ActiveRecord::Base
   has_many :foods
end

然后，您必须执行以下操作：

#app/controllers/categories_controller.rb
Class CategoriesController < ApplicationController
    def show
        @category = Category.find params[:id]
        respond_to do |format|
            format.html
            format.json { render json: @category.foods.to_json }
        end
    end 
end

#app/controllers/categories_controller.rb
类分类控制器<应用程序控制器
def秀
@category=category.find参数[：id]
回应待办事项|格式|
format.html
format.json{render json:@category.foods.to_json}
结束
结束
结束

Ok，但现在，我如何在每个选项卡中输入类别id，以便在不重新加载的情况下从该类别中提取食物？很抱歉，我忘记了为您添加标签。您可以将类别id传递给javascript函数，该函数将内容加载到div中。例如（使用jquery）：函数loadFood（category_id）{$（“.tab content”）.load（“/category/”+category_id）；}感谢您的回复。问题是，我希望标签显示在Foods#index视图中。因此，我需要将您为类别#show所做的代码添加到我的#index方法中？它一直在说没有ID无法找到类别谢谢您的回复！您能发布错误日志吗？当然！请检查更新的问题，我已将所有相关的塔夫顺便说一句，这些标签是重新灌装（Bourbon.io）的预制标签，我几乎有了……我唯一的问题是，路线如何？我需要如何处理它们？

@category=category.find params[：id]

将只返回一个项目。因此，您不能像

@categories.each do | tab |

那样迭代。如果您想查看所有类别，则需要更改为

@categories=Category.all

。我建议您阅读此内容以帮助您更好地理解：

#app/assets/javascripts/application.js
$(".categories").on("click", "a", function() {
   $.ajax({
       url: $(this).attr("href"),
       dataType: "json",
       success: function(data) {
           $(".category").html(data)
       }
   });
});

#app/controllers/categories_controller.rb
Class CategoriesController < ApplicationController
    def show
        @category = Category.find params[:id]
        respond_to do |format|
            format.html
            format.json { render json: @category.foods.to_json }
        end
    end 
end