Attempting to clarify a peculiar situation with as much detail as possible. Attached are images/examples.
A specific page is dedicated to displaying all the users a particular user follows.
users_controller.rb
def following
@pals = current_user.following
end
following.html.erb
<% @pals.each do |pal| %>
<div class="following-user-btn">
<% if current_user_is_following(current_user.id, pal.wall.id) %>
<%= link_to 'Following' , unfollow_wall_path(pal.wall.id), remote: true, method: :post, class: 'unfollow-button' %>
<% else %>
<%= link_to 'Follow' , follow_wall_path(pal.wall.id), remote: true, method: :post, class: 'btn follow-button' %>
<% end %>
</div>
<% end %>
Upon initial load, everything displays correctly, with the Following button next to each user and unfollowing functions properly. However, after clicking the unfollow button once, it changes the href for other users to the first one you unfollowed. You may not be able to Follow again if another user is currently utilizing the following button.
Here is my relationships controller and accompanying javascript:
def follow_wall
if current_user.follow @wall.id
respond_to do |format|
format.html { redirect_to root_url }
format.js { render 'walls/follow_wall' }
end
end
end
def unfollow_wall
if current_user.unfollow @wall.id
respond_to do |format|
format.html { redirect_to root_url }
format.js { render 'walls/unfollow_wall' }
end
end
end
Unfollow_wall.js.erb
$('.unfollow-button').bind('ajax:success', function(){
$(this).closest('.unfollow-button').hide();
$(this).closest('.following-user-btn').html('<%= link_to 'Follow' , follow_wall_path(@wall.id), remote: true, method: :post, class: 'btn follow-button' %>');
});
Follow_wall.js.erb
$('.follow-button').bind('ajax:success', function(){
$(this).closest('.follow-button').hide();
$(this).closest('.following-user-btn').html('<%= link_to 'Following' , unfollow_wall_path(@wall.id), remote: true, method: :post, class: 'unfollow-button' %>');
});
I attempted changing it to this:
$('#follow-button').attr('class', 'btn unfollow-button')
.text('Following')
.attr('href', "/<%= @wall.id %>/unfollow_wall")
.attr('id', 'unfollow-button');
$('#unfollow-button').text('Follow')
.attr('class', 'btn follow-button')
.attr('href', "/<%= @wall.id %>/follow_wall")
.attr('id', 'follow-button');
Unfortunately, no success with either method.
Note that the href is correct for all users upon refreshing the page. https://i.sstatic.net/molRS.png
When I unfollow the middle user, everything remains intact. https://i.sstatic.net/gZPFv.jpg
However, when I unfollow the top user, the top user's href changes to the middle user? This is where my confusion intensifies. https://i.sstatic.net/N6t5D.png
This issue has been puzzling me for days... Any assistance would be greatly appreciated. Thank you!