Pagination with follow / unfollow button: Ajax is having problems due to duplicate class names

Question

My users /show.html.erb are working correctly because there is only one class name displayed on each page. When users are divided into users/index.html.erb pages along with follow/unfollow buttons , the relationship/js.create.erb and relationship/js.destroy.erb get wacky because the page has duplicate class names (the first user user updates, no matter which user is tracked / disabled, and this only fixes itself when the page is updated (the actual model still works correctly)).

I did not use unfollow / follow partials in users/index.html.erb because index.html.erb does not have the @user variable, it paginates @users, so I use user.id

 class RelationshipsController < ApplicationController before_action :logged_in_user def create @user = User.find(params[:followed_id]) current_user.follow(@user) respond_to do |format| format.html { redirect_to @user } format.js end end def destroy @user = Relationship.find(params[:id]).followed current_user.unfollow(@user) respond_to do |format| format.html { redirect_to @user } format.js end end end **relationships/create.js.erb** $("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>"); $("#followers").html('<%= @user.followers.count %> <br> followers'); **relationships/destroy.js.erb** $("#follow_form").html("<%= escape_javascript(render('users/follow')) %>"); $("#followers").html('<%= @user.followers.count %> <br> followers'); **users/index.html.erb** <div class="row community"> <% @users.in_groups_of(3, false).each do |users| %> <div class="col-sm-12"> <% users.each do |user| %> <ul class="name-head"> <% unless current_user == user %> <div id="follow_form"> <% if current_user.following?(user) %> <%= form_for(current_user.active_relationships.find_by(followed_id: user.id), html: { method: :delete }, remote: true) do |f| %> <%= f.submit "Unfollow", class: "btn btn-primary" %> <% end %> <% else %> <%= form_for(current_user.active_relationships.build, remote: true) do |f| %> <div><%= hidden_field_tag :followed_id, user.id %></div> <%= f.submit "Follow", class: "btn btn-primary" %> <% end %> <% end %> </div> <% end %> </ul> <div class="col-xs-12"> <div class="col-xs-4"> <a href="<%= following_user_path(user.id) %>"> <center><strong id="following" class:"stat"> <%= user.following.count %><br> following </strong></center> </a> </div> <div class="col-xs-4"> <a href="<%= followers_user_path(user.id) %>"> <center><strong id="followers" class="stat"> <%= user.followers.count %><br> followers </strong></center> </a> </div> <div class="col-xs-4"> <center><strong id="photo-count" class="stat"> <%= user.photos.count %><br> photos shared </strong></center> </div> </div> </div> <% end %> </div> <% end %> </div> <%= will_paginate %> **users/show.html.erb** . . . <li class="follow"> <%= render 'follow_form' if logged_in? %> </li> </ul> </div> <div class="col-xs-12"> <div class="col-xs-4"> <a href="<%= following_user_path(@user) %>"> <center><strong id="following" class:"stat"> <%= @user.following.count %><br> following </strong></center> </a> </div> <div class="col-xs-4"> <a href="<%= followers_user_path(@user) %>"> <center><strong id="followers" class="stat"> <%= @user.followers.count %><br> followers </strong></center> </a> </div> <div class="col-xs-4"> <center><strong id="photo-count" class="stat"> <%= @user.photos.count %><br> photos shared </strong></center> </div> end **_follow_form.html.erb** <% unless current_user?(@user) %> <div id="follow_form"> <% if current_user.following?(@user) %> <%= render 'unfollow' %> <% else %> <%= render 'follow' %> <% end %> </div> <% end %> **_follow.html.erb** <%= form_for(current_user.active_relationships.build, remote: true) do |f| %> <div><%= hidden_field_tag :followed_id, @user.id %></div> <%= f.submit "Follow", class: "btn btn-primary" %> <% end %> **_unfollow.html.erb** <%= form_for(current_user.active_relationships.find_by(followed_id: @user.id), html: { method: :delete }, remote: true) do |f| %> <%= f.submit "Unfollow", class: "btn btn-primary" %> <% end %> 

Edit: I was thinking about passing user_id to classes, for example:

 <div id="follow_form<%="#{user.id}"%>"> which created <div id="follow3"> 

However, I do not know how to pass this to destroy.js.erb and create.js.erb

 I have tried many combinations such as: $("#follow_form<%="#{user.id}"%>").html("<%= escape_javascript(render('users/unfollow')) %>"); 

and

  $("#follow_form<%= @user.id%>").html("<%= escape_javascript(render('users/unfollow')) %>"); 

however, the code still does not work, and even if it did, it will still work, because changing the create / destroy.js.erb files will break the follow / unfollow users.html.erb buttons.

EDIT: I also found this question , which is similar, but does not contain an accepted answer.

Edit for Heroku logs: This is what I get when I follow / unsubscribe from users / index.html.erb:

 Started DELETE "/relationships/360" for 184.90.97.154 at 2016-05-13 20:05:17 +0000 Processing by RelationshipsController#destroy as JS Rendered users/_follow.html.erb (1.6ms) (1.1ms)[0m [1mSELECT COUNT(*) FROM "users" INNER JOIN "relationships" ON "users"."id" = "relationships"."follower_id" WHERE "relationships"."followed_id" = $1[0m [["followed_id", 1]] Started POST "/relationships" for 184.90.97.154 at 2016-05-13 20:07:26 +0000 Processing by RelationshipsController#create as JS [1m[36m (1.5ms)[0m [1mCOMMIT[0m 

Answer 1

I duplicated your code, and after adding the changes below it worked fine. (i.e. I don’t need to reload the page for the “Follow / Unfollow” button to change)

Try the following:

---

users / index.html.erb (only the corresponding code here, which is the "Follow /" Unfollow "button)

 <ul class="name-head"> <% unless current_user == user %> <%= render partial: 'follow_form', locals: { user: user } %> <% end %> </ul> 

users / _follow_form.html.erb

 <div id="follow_form-<%= user.id %>"> <% if current_user.following?(user) %> <%= render partial: 'unfollow', locals: { user: user } %> <% else %> <%= render partial: 'follow', locals: { user: user } %> <% end %> </div> 

users / _unfollow.html.erb

 <%= form_for(current_user.active_relationships.find_by(followed_id: user.id), html: { method: :delete }, remote: true) do |f| %> <%= f.submit "Unfollow", class: "btn-default" %> <% end %> 

users / _follow.html.erb

 <%= form_for(current_user.active_relationships.build, remote: true) do |f| %> <div><%= hidden_field_tag :followed_id, user.id %></div> <%= f.submit "Follow", class: "btn" %> <% end %> 

relationship / create.js.erb

 $("#follow_form-<%= @user.id %>").html("<%= escape_javascript(render(partial: 'users/unfollow', locals: { user: @user })) %>"); 

relationship / destroy.js.erb

 $("#follow_form-<%= @user.id %>").html("<%= escape_javascript(render(partial: 'users/follow', locals: { user: @user })) %>"); 

Note the use of <%= render partial: "_partial.html.erb", locals: { var_name: var } %> . optional locals: { ....... } hash locals: { ....... } allows you to pass the local variable the particle you want to display ( _partial.html.erb ). In this case, you also need to add partial: to the name of the part you want to display.

Thus, your local user variable will become available not only in users/index.html.erb , but also in other files listed above.

Answer 2

The problem is your particles, relationship/js.create.erb and relationship/js.destroy.erb , because in your code you only update the first #follow-form div on your page (i.e. #follow-form for the first user, like you are reporting).

You should change your users\index.html.erb to

 <% unless current_user == user %> <div id="follow-form-<%= user.id %>"> 

Thus, each user will have their own unique div element. Then just change the relationship/js.create.erb as follows:

 $("#follow-form-<%= @user.id %>").html("<%= escape_javascript(render('users/unfollow')) %>"); $("#followers").html('<%= @user.followers.count %> <br> followers'); 

and relationship/js.destroy.erb respectively, then you should get everything that was expected.