Rails 使用 form_for 和 Ajax 显示一系列对象

Question

我正在尝试显示“兴趣”列表，用户可以通过单击与兴趣图像相关联的按钮来“关注”这些“兴趣”。单击按钮以关注兴趣时，兴趣（及其相应的图像）应从列表中消失。

我在 create.js.erb 文件中使用了一个隐藏函数，该函数在单击关注按钮时由关系控制器调用，但该函数只会隐藏一系列兴趣中的第一个兴趣——而不是兴趣用户点击需要消失。所以必须有更好的方法来设置它，但我一辈子都无法弄清楚。这是我当前的设置：

我的控制器

class StaticPagesController < ApplicationController
  def home
    @user = current_user
    @city = request.location.city
    @interests = Interest.all
  end

首页

<%= render @interests %>

部分

<div id="follow_form">                      
<div class="four columns portfolio-item interests">
    <div class="our-work">
        <a class="img-overlay">
        <%= image_tag interest.image_path %>
            <div class="img-overlay-div">
            <h4><%= interest.name %></h4>
            </br>
            <h5>Placeholder
            </br>
            <%= interest.desc %></h5>
            <%= form_for(current_user.relationships.build(followed_id: 
                             interest.id), remote: true) do |f| %> 
                <div><%= f.hidden_field :followed_id %></div>
                <%= f.submit "I'm interested", class: "b-black" %>
            <% end %>
            </div>
        </a>
        <h3><a href="#"><%= interest.name %></a><span>features info</span></h3>
    </div>
   </div>
</div>

当您单击按钮时，关系控制器调用的 create.js.erb：

$("#follow_form").hide();

更新 这是用于进一步说明的关系控制器

def create
  @interest = Interest.find(params[:relationship][:followed_id])
  current_user.follow!(@interest)
  respond_to do |format|
      format.html { redirect_to(root_url) }
      format.js 
   end
end

Answer 1

您需要提供一些东西来区分同一页面上的不同“follow_forms”。否则，jQuery 将只选择第一个元素并仅删除该元素。

如何做到这一点的一个想法是将“interest.id”附加到follow_form id的末尾

将您的部分更新为这样（假设您的部分被调用并位于 /app/views/interests/_follow_form.html.erb：

<div id="follow_form<%="#{interest.id} %>">                      
<div class="four columns portfolio-item interests">
    <div class="our-work">
        <a class="img-overlay">
        <%= image_tag interest.image_path %>
            <div class="img-overlay-div">
            <h4><%= interest.name %></h4>
            </br>
            <h5>Placeholder
            </br>
            <%= interest.desc %></h5>
            <%= form_for(current_user.relationships.build(followed_id: 
                             interest.id), remote: true) do |f| %> 
                <div><%= f.hidden_field :followed_id %></div>
                <%= f.submit "I'm interested", class: "b-black" %>
            <% end %>
            </div>
        </a>
        <h3><a href="#"><%= interest.name %></a><span>features info</span></h3>
    </div>
   </div>
</div>

这样，每个 follow_form 都会附加一个唯一的 ID。然后你可以遍历你的兴趣并像这样调用每个兴趣的部分：

主页：

<% @interests.each do |interest| %>
  <%= render 'interests/follow_form', :interest => interest %> 
<% end %>

create.js.erb

$("#follow_form_<%= "#{@interest.id}" %>").hide())

您的控制器操作可以保持不变。