Rails showing series of objects with form_for and Ajax

Question

I'm trying to show a list of "Interests" that users can "follow" by clicking on a button associated with the Interest's image. Upon clicking the button to follow an Interest, the Interest (and it's corresponding image) should disappear from the list.

I'm using a hide function in a create.js.erb file called upon by a Relationship controller when the follow button is clicked, but the function will only hide the first Interest in the series of Interests--NOT the Interest the user clicked on that needs to disappear. So there has to be a better way to set this up, but I cannot, for the life of me, figure it out. Here's my current setup:

My Controller

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

The home page

<%= render @interests %>

The partial

<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>

And the create.js.erb that's called upon by a Relationships controller when you click the button:

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

UPDATE Here is the Relationships controller for additional clarification

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

You need to provide something to differentiate the different "follow_forms" that you have on the same page. Otherwise, jQuery will just select the first element and only remove that one.

One idea of how to do this would be to append the "interest.id" to the end of the follow_form id

Update your partial to be like this (assuming your partial is called and located in /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>

This way each follow_form will have a unique ID attached to it. Then you can loop through your interests and call a partial on each one like this:

home page:

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

create.js.erb

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

Your controller action can stay the same.