1

I'm using the acts_as_votable gem to add a Like button to my posts. I followed the instructions I found in the following StackOverflow question:

Like button Ajax in Ruby on Rails

The code works really well but I'd rather use an an image than the text link. Basically I'm trying to use an existing design template that uses the following code based on like or dislike:

Like

<span class="heart-icon" style="background-position: 0px -290px;" id="<%= @pride.id %>"></span>

Dislike

<span class="heart-icon" style="background-position: 0px -256px;" data-id="<%= @pride.id %>"></span>

I tried using a do on the link_to and it works but also applies a text overlay that I believe is coming from the JS file. I've searched though a lot of the questions on here and I can't seem to find one that fits my situation. I'm hoping someone in the community will be able to help me out.

Here is how I currently have it setup:

My view looks like this:

<% if current_user.liked? @content %>
 <%= link_to "Dislike", dislike_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Like', toggle_href: like_content_path(@content), id: @content.id } %>
<% else %>
 <%= link_to "Like", like_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Dislike', toggle_href: dislike_content_path(@content), id: @content.id } %>
<% end %>

My CoffeeScript looks like this:

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

# toggle links
$("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
  return

return

This is how I want my view configured but it keeps writing the Like/Dislike text over the image and I can't figure out where to change it.

<% if current_user.liked? @content %>
    <%= link_to "Dislike", dislike_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Like', toggle_href: like_content_path(@content), id: @content.id } do %>
        <span class="heart-icon" style="background-position: 0px -290px;" id="<%= @content.id %>"></span>
    <% end %>
<% else %>
    <%= link_to "Like", like_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Dislike', toggle_href: dislike_content_path(@content), id: @content.id } do %>
        <span class="heart-icon" style="background-position: 0px -256px;" data-id="<%= @content.id %>"></span>
    <% end %>
<% end %>
Community
  • 1
  • 1
Derrick Lamers
  • 51
  • 6
  • 1
    Your question is not clear,I can help but need more details can you post exactly what is the error or log or show us an image about the error....by the way if you are trying to show image instead of links try this according <%= link_to image_tag("image.jpg",:border=>0,:size=>"14x14"), dislike_content_path(@content), class: 'vote', method: :put %> – Carlos Morales Aug 29 '14 at 14:02
  • Basically I have a like/dislike heart image on each post, when the user clicks on the heart the image changes from gray to red and a counter value increases. This all occurs without a page refresh. I used the article above which works great but is meant for updating the text on the link_to and not the image. I'm going to edit the question so that it makes a little more sense. – Derrick Lamers Aug 29 '14 at 15:49

1 Answers1

2

I found this awesome repository on GitHub that helped me out. Special thanks to the author.

https://github.com/shihabullal/soquestion6482354

Derrick Lamers
  • 51
  • 6