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

时间:2013-09-13 00:34:19

标签: javascript ruby-on-rails ajax forms ruby-on-rails-4

我正在尝试显示一个“兴趣”列表,用户可以通过单击与兴趣图像关联的按钮来“关注”。单击按钮以关注兴趣后,兴趣(及其对应的图像)应从列表中消失。

当我点击跟随按钮时,我在关系控制器调用的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

1 个答案:

答案 0 :(得分: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())

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