Question

我无法完成这项工作。我有我的模型“食物”，属于类别，我有我的模型“类别”，有很多食物。

Food有一个category_id列来引用它的类别。简单。

我想用AJAX在每个标签中渲染一个不同类别的食物，但我非常渴望它。

我正在为我的标签使用Refills，它们与静态html内容完美配合。

当我想用每个类别中的食物填充每个标签时，问题出现了。

我的观点

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

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

我的路线

  resources :categories, only: [:show]

My Categories Controller

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

我的类别显示视图

<% @category.foods.each do |food| %>
    <%= image_tag food.food_image_url(:food_small), class: "radius" %>
    <h5> <%= food.name %> </h5>
    <span class="small"><i class="icon-list"></i> <%= food.ingredients %></span>
    <span class="medium block textright">
    <% if food.price === "Verde" %>
    <%= image_tag "verde.png" %>
    <% elsif food.price === "Azul" %>
    <%= image_tag "azul.png" %>
    <% elsif food.price === "Amarillo" %>
    <%= image_tag "amarillo.png" %>
    <% elsif food.price === "Rojo" %>
    <%= image_tag "rojo.png" %>
    <% elsif food.price === "Morado" %>
    <%= image_tag "morado.png" %>
    <% end %>
    </span>
<% end %>

我的食物#index Controller

    def index
      @addictfood = Addictfood.last
      @categories = Category.all.limit(7)
      @food = Food.last
      @foods = Food.all
  end

我现在真的不怎么做这项工作。请帮忙！非常感谢

使用AJAX在选项卡中渲染不同的类别

0 个答案: