How to dynamically switch text or button from follow to Un-follow using Ajax?

Question

All, I have a function within my controller that I am calling directly. However, once it executes I would like it to change to either follow or un-follow. I am using Act as Follower Gem and having some issues with changing my follow or un-follow appropriately. Can someone please point me into the right direction?

In my controller:

Createcampaigncontroller.rb

 def follow
  @campaign = Createcampaign.find(params[:id])
if user_signed_in? && !current_user.following?(@campaign)
  current_user.follow(@campaign)
  #RecommenderMailer.new_follower(@user).deliver if @user.notify_new_follower
  flash[:notice] = "You are now following #{@current_user.username}  #{@campaign.name}."
  respond_to do |format|
  format.html { redirect_to(:back) }
  format.js {render :action => "follow_button" }
  #redirect_to :back
end
else
flash[:error] = "You must <a href='/users/sign_in'>login</a> to follow #  {@campaign.name}.".html_safe
redirect_to root_url
end
end

  def unfollow
  if current_user
  @campaign = Createcampaign.find(params[:id])
  current_user.stop_following(@campaign)
   flash[:notice] = "You are no longer following #{@campaign.name}."
    #format.js {render :action => "follow" }
   redirect_to :back

   else
   flash[:error] = "You must <a href='/users/sign_in'>login</a> to unfollow    #{@campaign.name}.".html_safe
    end
    end

In my view i was playing around with option to show button based on criteria.

<% if current_user.id == @campaignid%>
                         you own this 
                         <%end%>
                          <%else%>
                        <% if current_user.following?(@campaign) %>
                          <%= link_to "Unfollow",    unfollow_createcampaign_path(@campaign),class: "btn btn-success btn-outline btn-sm" %>
                        <%elsif%>
                        <%= link_to "follow", follow_createcampaign_path(@campaign),class: "btn btn-success btn-outline btn-sm" %>
                        <%end%>

This does not seem to help. I looked at some Rails example but they deal with submitting a field or form. Maybe I need to change my approach. Any help is appreciated.

Answer 1

Submit your link using ajax. For that add the "remote:true" option to your link also add a link to reference to it later:

<%= link_to "follow", follow_createcampaign_path(@campaign), id: "follow<%= @campaign.id %>", remote:true, class: "btn btn-success btn-outline btn-sm" %>

This will submit your link click via ajax to your controller. In your controller respond with a javascript file:

def follow
 respond_to do |format|
   format.html { redirect_to(:back) }
   format.js
end

When you do this rails expects you to have a javascript file with the name of your controller action, in this case (follow.js) in your Createcampaign view folder.

Inside your follow.js.erb file you can put the response object or write your javascript to replace the class and href of you link. As an example, this is the javascript response I sent to my view for my posts:

$("#like_<%= @post.id %>").removeClass('glyphicon-heart-empty').addClass('glyphicon-heart');
$("#like_<%= @post.id %>").attr('href', "<%= unlike_post_path(@micropost.id) %>");

The first line, removes the previous class (empty heart) and replaces it with a new class (a filled heart). The second line, changes the href link from like_post_path to unlike_post_path. It is quite simple once you break it down.