Question

The problem is that all the “into it” buttons on the page have the same id and all the “undo” have the same id thus clicking one offsets others. Also the buttons only toggle once. I’m very new to rails,CSS,ajax and I appreciate the help, thank you.

Micropost_Helper.rb

def toggle_like_button(micropost, user)
  if user.voted_for?(micropost)
    link_to "undo", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"unvote_form", :remote => true
  else
    link_to "Into it!", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"vote_form", :remote => true
  end
end

Micropost Controller

def like
  @micropost = Micropost.find(params[:id])
  if @micropost.user_id != @current_user
    if @current_user.voted_for?(@micropost)
      @current_user.unvote_for(@micropost)
      respond_to do |format|
        format.html { redirect_to :back }
        format.js
      end
    else
      @current_user.vote_for(@micropost)
      respond_to do |format|
        format.html { redirect_to :back }
        format.js
      end
    end
  end
end

VIEW/microposts/like.js.erb <– with this i can only click the button’s once, need help here as well

$("#vote_form").html("undo")
$("#unvote_form").html("Into it!")

Answer 1

You should append uniq id to each button like this:

def toggle_like_button(micropost, user)
  if user.voted_for?(micropost)
    link_to "undo", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"unvote_form_#{micropost.id}", :remote => true
  else
    link_to "Into it!", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"vote_form_#{micropost.id}", :remote => true
  end
end

and then you can reference one button in your like.js.erb:

$("#vote_form_<%=@micropost.id%>").html("undo")
$("#unvote_form_<%= @micropost.id%>").html("Into it!")

That way you will have valid html and your problem should be solved.