Render Follow/unfollow Button In Rails With Ajax

I have implemented follow/unfollow functionality and would like to add AJAX call to it, but I am stuck. My partial _follow_button.html.erb for follow/unfollow which is rendered on

Solution 1:

Calling the partial follow/unfollow

<% if current_user.id != user.id %>
  <%= render partial: 'follow_links', locals: { user: user }
<% end %>

Partial follow_links.

<% show_follow_link   = current_user.following?(user) ? 'hidden' : '' %>
<% show_unfollow_link = current_user.following?(user) ? '' : 'hidden' %>

<!-- links to follow/unfollow have data-attributes that include the path to make the ajax post and the user to follow, that is used to find the link to show after the ajax call. You should use the path to the controller that will create or destroy the relationship -->
<%= link_to 'Follow',   '#', { class: 'follow-user btn-success #{show_follow_link}', "data-url": follow_user_path(user.id), "data-followee": user.id } %>
<%= link_to 'Unfollow', '#', { class: 'unfollow-user btn-danger #{show_unfollow_link}', "data-url": unfollow_user_path(user.id), "data-followee": user.id } %>

Javascript for the partial. Ajax post to follow/unfollow

$('.follow-user').on("click",function() {
  follow_unfollow($(this), "follow")
});

$('.unfollow-user').on("click",function() {
  follow_unfollow($(this), "unfollow")
});

functionfollow_unfollow(target, what_to_do)
  url = target.attr('data-url')
  followee = target.attr('data-followee')
  if (what_to_do == "follow") {
    other_button = $('.unfollow-user[data-followee="'+followee+'"]')
  } else {
    other_button = $('.follow-user[data-followee="'+followee+'"]')
  }

  $.ajax( {
    url: url,
    type: 'post',
    success: function() {
      // Hide this link
      target.addClass('hidden');
      // Show the other link
      other_button.removeClass('hidden');
    },
    error: function(ret) {
      alert(ret.responseJSON.error);
    }
  });

};

Changes in your controller.

classRelationshipsController < ApplicationControllerdefcreate
    user = User.find(params[:followed_id])
    @follow = current_user.follow(user)

    respond_to do|format|if@follow.valid?
        format.html
        format.json: { render json:@follow }
        returnelse
        format.html
        format.json: { render json: { :error => 'Follow failed', :status_code:not_found } }
      endendenddefdestroy
    user = Relationship.find(params[:id]).followed 
    @unfollow = current_user.unfollow(user)

    respond_to do|format|if@unfollow.valid?
        format.html
        format.json: { render json:@unfollow }
      else
        format.html
        format.json: { render json: { :error => 'Unfollow failed', :status_code:not_found } }
      endendendend

Solution 2:

---

An advice

An advice, also regarding your last question: I would recommend - instead of posting questions about debugging code on StackOverflow - create a good debugging environment for yourself.

Byebug or Binding pry is a good place to start, but before you can use those properly you need to understand the code you are using. I would recommend reading Working with Javascript in depth! - it really helped me getting the hang of it and understanding the dataflow of Rails and ajax.

This would, i think, break the unbreakable Stackoverflow-loop, that i myself were tied to for a long time:

loop do
  puts "Try code"sleep 1000
  puts "Arrhh! an error!"sleep 1000
  puts "Posting on Stackoverflow"sleep 1000
  puts "Waiting for answer"sleep 1000
end 

I hope you figure it out!