Rails 4 - js changing all comments onClick issue

Question

I've been struggling with this (probably simple issue) for many days and nobody here seems to know the answer. I've asked a question and another question and I am now able to change icons to text on click.

The problem is that when I have a list of comments and I click on one of the icon (thumbs_up/thumbs_down), it changes ALL icons for all comments on the page to "Voted!".

comments index page

<% @comments.each do |comment| %>

  <% comment.content %>

    div class="thumbsup">
      <%= link_to image_tag('othericons/thumbsup_off.PNG', height: '20', width: '20', like_post_comment_path(comment.post_id, comment), method: :put, :remote => true %>
    </div>

    <div class="thumbsdown">
      <%= link_to image_tag('othericons/thumbsdown_off.PNG', height: '20', width: '20', dislike_post_comment_path(comment.post_id, comment), method: :put, :remote => true %>
    </div>

<% end %>

score 3 · Answer 1 · 2014-05-05T16:55:14.660

3

Lets see on the code

$('.thumbsdown a, .thumbsup a').on('click', function() 
{
    $('.thumbsdown').before('You voted')
    $('.thumbsdown, .thumbsup').remove()
})

$('.thumbsdown, .thumbsup') is the jQuery function which returns all elements with the selector .thumbsdown. And removes also all of them. You should let the jQuery knows what exaclty you want to remove or change. For example it could be:

$('.thumbsdown a, .thumbsup a').on('click', function() 
{
    var parent = $(this).closest('li'); # would be better to use some class instead
    $('.thumbsdown', parent).before('You voted'); # select elements in context of the parent
    $('.thumbsdown, .thumbsup', parent).remove(); # select elements in context of the parent
})

added: jQuery .on() requires at least one element to be available at the moment of function call for proper work. In this case .thumbsdown a, .thumbsup a. If you use assets pipeline then plain scripts are loaded before the body is loaded. You may wish to put the example code into

$(function(){ 
    /* code here */ 
})

to load it after DOM is loaded, or modify it to

$(document).on('click', '.thumbsdown a, .thumbsup a', function() {

edited May 05 '14 at 16:55

answered May 05 '14 at 07:51

Doesn't work. Now, I am back at the same problem I had in linked question - icons don't change to text on click. – Absurdim May 05 '14 at 08:21
Please add the markup of your list of comments to the question. I'm sure my solution would work with right selectors. It's quite simple issue at all. – May 05 '14 at 08:38
I have listed all that is relevant in my previous questions. Do you think the problem might be with gems in rails? Some solutions work for some time, then just stop working properly. – Absurdim May 05 '14 at 09:04
1

Your markup doesn't look good. You produce a big bunch of text and `div`s without any semantics. Wrap each comment it the loop with some `
` and modify my example with `closest('.comment')`.
– May 05 '14 at 09:29
It works when I put it directly on the page. When I put it in /assets, it doesn't work. So, the problem is with the assets pipeline, not with the your code. – Absurdim May 05 '14 at 15:47
jQuery `.on()` requires at least one element to be available at the moment of function call for proper work. In this case `.thumbsdown a, .thumbsup a`. If you use assets pipeline then plain scripts are loaded before the body is loaded. You may wish to put the example code into `$(function(){ /* code here */ })` ([short .ready() syntax](http://api.jquery.com/ready/)) to load it after DOM is loaded, or modify it to `$(document).on('click', '.thumbsdown a, .thumbsup a', function()` ([.on() syntax](http://api.jquery.com/on/#direct-and-delegated-events)). – May 05 '14 at 16:04
It seems to be working. Answer, so that I can accept it. Also, please take a look at this (no good answers) - http://stackoverflow.com/questions/23457624/rails-4-displaying-stars-issue-with-coffeescript – Absurdim May 05 '14 at 16:26

Rails 4 - js changing all comments onClick issue

1 Answers1