Like button Ajax in Ruby on Rails - how to change image and iconic text

Question

I'm trying to do a Like button in Rails with Ajax such as this one: Like button Ajax in Ruby on Rails

With the above example it works perfectly, but I would like to understand how I can do it with images and with iconic text like fontawesome instead of with text like/dislike. Any references?

This is the code I'm using to the iconic text (I have no idea on how to change images).

View code:

if current_user.liked? content
    link_to fa_icon("some-symbol"), dislike_movie_path(content), 
                            class: 'vote', 
                            method: :put, 
                            remote: true, 
                            data: { toggle_text: 'another-symbol', 
                                    toggle_href: like_movie_path(content), 
                                    id: content.id }
  else
    link_to fa_icon("another-symbol"), like_movie_path(content), 
                            class: 'vote', 
                            method: :put, 
                            remote: true, 
                            data: { toggle_text: 'some-symbol', 
                                    toggle_href: dislike_movie_path(content), 
                                    id: content.id }
  end

javascript code:

$(document).on 'ajax:success', 'a.vote', (status,data,xhr)->
  $(".votes-count[data-id=#{data.id}]").text data.count

  $("a.vote[data-id=#{data.id}]").each ->
    $a = $(this)
    href = $a.attr 'href'
    text = $a.text()
    $a.text($a.data('toggle-text')).attr 'href', $a.data('toggle-href')
    $a.data('toggle-text', text).data 'toggle-href', href
    $i = $a.get("i")
    if($i.hasClass('some-symbol'))
      $i.removeClass('some-symbol').addClass('another-symbol')
    else
      $i.removeClass('another-symbol').addClass('some-symbol')
    return
  return

Thank you for your help.

Answer 1

Here's what I'd do:

--

Structure

#config/routes.rb
resources :movies do
   put :vote #-> domain.com/movies/:movie_id/vote
end

#app/controllers/movies_controller.rb
class MoviesController < ApplicationController
   respond_to :js, :json, :html

   def vote
      @movie = Movie.find params[:movie_id]

      vote = current_user.votes.find _or_create_by movie_id: params[:movie_id]
      vote.toggle(:vote)

      respond_with vote
   end
end

--

Functionality

This will give you the ability to use the following:

#app/views/movies/show.html.haml
= link_to fa_icon("some-symbol"), movie_vote_path(content), class: 'vote',  method: :put, remote: true, data: { id: content.id }

The trick, in my opinion, will be to put the styling you want into the CSS - allowing you to focus on changing that. The link will be able to remain the same - meaning you can then decide whether the vote by determining the value it gives on return:

#app/assets/javascripts/application.js.coffee
$(document).on 'ajax:success', 'a.vote', (status, data ,xhr)->
  $(".votes-count[data-id=#{data.movie_id}]").text data.count

  $("a.vote[data-id=#{data.movie_id}]").each ->
     if data.movie_id is "1"
        $(this).addClass "up"
     else
        $(this).addClass "down"
  return

#app/assets/stylesheets/application.css.sass
.vote
   & .up
     #styling for upvote

   & .down
     #styling for downvote