Nsryjdtyk

I have a comment model with like/unlike functionality and when I like any comment for the first time, it works correctly, because the like link was rendered with the initial html.erb rendering. But when I try to unlike or re-like anything, it always updates the partials with the link to the first comment I liked or unliked, respectively.

comments_controller.rb

def like

    @comment = Comment.find(params[:id])

    @comment.liked_by current_user

    respond_to do |format|

      format.html { redirect_to :back }

      format.js { render '/comments/like.js.erb' }# layout: false }

    end   

  end



  def unlike

    @comment = Comment.find(params[:id])

    @comment.unliked_by current_user

    respond_to do |format|

      format.html { redirect_to :back }

      format.js { render '/comments/unlike.js.erb' }# layout: false }

    end 

  end

unlike.js.erb

$('.unlike_comment').bind('ajax:success', function(){



   $(this).parent().parent().find('.vote_count').html('<%= escape_javascript @comment.votes_for.size.to_s %>');

   $(this).closest('.unlike_comment').hide();



   $(this).closest('.votes').html(' <%= link_to "", like_comment_path(@comment), remote: true, method: :get, class: 'like_comment glyphicon glyphicon-chevron-up', :style=>'color: #cecece;' %>');



});

like.js.erb

$('.like_comment').bind('ajax:success', function(){



   $(this).parent().parent().find('.vote_count').html('<%= escape_javascript @comment.votes_for.size.to_s %>');

   $(this).closest('.like_comment').hide();



   $(this).closest('.votes').html(' <%= link_to "", unlike_comment_path(@comment), remote: true, method: :get, class: 'unlike_comment glyphicon glyphicon-chevron-up', :style=>'color: #202020;' %>');



});

And the relevant portion of _comment.html.erb

 <comment-body>

      <p>

      <span class="votes">

      <% if logged_in? && (current_user.liked? comment) %>

         <%= link_to "", unlike_comment_path(comment), method: :get, remote: true, class: 'unlike_comment glyphicon glyphicon-chevron-up', :style=>'color: #202020;' %>

      <% elsif logged_in? %>

         <%= link_to "", like_comment_path(comment), method: :get, remote: true, class: 'like_comment glyphicon glyphicon-chevron-up', :style=>'color: #cecece;' %>

      <% else %>

        <%= link_to "", prompt_login_comment_path(comment), method: :get, remote: true, class: 'prompt_login glyphicon glyphicon-chevron-up', :style=>'color: #cecece;' %>

      <% end %>



    </span>

    <%= link_to comment.title, comment, class: 'bigger comment-text' %> <%= link_to comment.body, comment, class: 'notbig comment-text' %>

    </p>

    </comment-body>

So for instance, if I unlike comment 4, then like comment 3, it will change the unlike link in the comment 3 partial to comments/4/unlike. What might be going wrong that would cause this to occur? Any help is greatly appreciated.

your callback should target a fixed DOM class otherwise event handler will be overwritten every time ajax is successful(which is what you are experiencing). Also you only need to update anchor attributes, not redraw the whole anchor using html method.

First make a unique class for each link eg comment_1

    <span class="votes">

      <% if logged_in? && (current_user.liked? comment) %>

         <%= link_to "", unlike_comment_path(comment), method: :get, remote: true, class: 'unlike_comment comment_#{comment.id} glyphicon glyphicon-chevron-up', :style=>'color: #202020;' %>

      <% elsif logged_in? %>

         <%= link_to "", like_comment_path(comment), method: :get, remote: true, class: "like_comment comment_#{comment.id} glyphicon glyphicon-chevron-up", :style=>'color: #cecece;' %>

      <% else %>

        <%= link_to "", prompt_login_comment_path(comment), method: :get, remote: true, class: 'prompt_login glyphicon glyphicon-chevron-up', :style=>'color: #cecece;' %>

      <% end %>

    </span>

Then update unlike.js.erb template(doing the opposite for like.js.erb):

$("." + "comment_#{@comment.id}").bind('ajax:success', function(){

   // Change class

   $(this).switchClass("like_comment", "unlike_comment");

   // Change path

   $(this).prop("src", "#{like_comment_path(comment)}");

   // anything else....

});

Let me know if it works.