Question

Im using ajax to toggle a “like” button without a page refresh. For some reason when I click the button, in the background of the button it seems there are layers of bigger buttons. I don’t know why they are layering or why they would be larger sizes.

The issue is with the bootstrap class I’m using. It causes it to call btn over btn. When I remove the class the links rerender properly. Thus i tried to restyle the link_to in CSS to make it look like a btn however the same issue arose.

The is how the button normally looks:

After its been clicked:

Micropost/Helper:

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

Microposts/like.js.erb:

$("#vote_form_<%=@micropost.id%>").html("<%= escape_javascript(toggle_like_button(@micropost, @current_user)) %>")
$("#unvote_form_<%=@micropost.id%>").html("<%= escape_javascript(toggle_like_button(@micropost, @current_user)) %>")

Micropost Controller:

def like
  @micropost = Micropost.find(params[:id])
  @feed_item = Micropost.find(params[:id])
  if @micropost.user_id != @current_user.id
    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

Answer 1

html(htmlString) sets the content of the selected element. Your selected element is the button. Use replaceWith(newContent) instead.