Rails使用form_for和Ajax顯示一系列對象

Question

我試圖顯示“興趣”列表，用戶可以通過單擊與興趣圖片相關的按鈕來“關注”。 單擊關注興趣的按鈕后，興趣（及其對應的圖像）應從列表中消失。

單擊“跟隨”按鈕時，我在由Relationship控制器調用的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>

然后單擊按鈕時由Relationships控制器調用的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())

您的控制器動作可以保持不變。