Like comment Ajax error

Question

I am using the "Acts As Votable" gem in my application because I want to allow my user to like and dislike comments. It has been working good so far, but now I want to implement Ajax to improve the user interface.

This is my code:

routes.rb:

resources :articles do
    member do
      put "like", to: "articles#upvote"
    end
    resources :comments do
      member do
        get "like", to: "comments#upvote"
        get "dislike", to: "comments#downvote"
      end
    end
  end

comments_controller.rb:

def upvote
    if @comment.upvote_from current_user
      respond_to do |format|
        format.html { redirect_to(:back) }
        format.js
      end
    end
  end

  def downvote
    if @comment.downvote_from current_user
      respond_to do |format|
        format.html { redirect_to(:back) }
        format.js
      end
    end
  end

_comment.html.erb:

<span class="like-comment">
      <%= link_to like_article_comment_url(@article, comment), method: :get, remote: true do %>
        <span class="fa fa-thumbs-up" id="thumbs-up"> <%= comment.get_upvotes.size %></span>
      <% end %>
    </span>
    <p class="dislike-comment">
      <%= link_to dislike_article_comment_url(@article, comment), method: :get, remote: true do %>
        <span class="fa fa-thumbs-down" id="thumbs-down"> <%= comment.get_downvotes.size %></span>
      <% end %>

upvote.js.erb:

$('#thumbs-up').replaceWith("<%= j render comment.get_upvotes.size %>");

downvote.js.erb:

$('#thumbs-down').replaceWith("<%= j render comment.get_downvotes.size %>");

The problem is it doesn't update the number of like/dislike when I click the like/dislike button. However, when I refresh the page, it updates the number of like/dislike. I don't know why the view doesn't update the number of like/dislike. Moreover, I tried to change the file to upvote.erb.js/downvote.erb.js as other people suggested but the problem is still there.

*Updated: When I opened the network console in firefox, I saw 500 internal server error when I clicked the like/dislike butto. I searched all the problem related with that error, but still couldn't figure what is wrong with my code.

score 0 · Answer 1 · answered Mar 02 '16 at 18:04

0

Try to rename file from .js.erb to .erb.js. That is because your ruby code has to be executed first

answered Mar 02 '16 at 18:04

weras

11
4

Thanks for your quicky reply, but it doesnt work for me in this situation. :( – Final Fantasy VIII Mar 02 '16 at 18:10

score 0 · Answer 2 · answered Mar 02 '16 at 18:23

0

Since you are using jquery on the front end, you could either rename your javascript files to .erb.js instead of .js.erb to prioritize the erb preprocessing first, or you could create an endpoint to retrieve that data so you can avoid bugs where maybe your ruby model code does not break javascript on the front end, its also best practice to make that data available over an endpoint in general.

answered Mar 02 '16 at 18:23

Kulix

444
3
12

Thank you for your help. I tried it, but it doesnt work me. :( – Final Fantasy VIII Mar 02 '16 at 18:27
When you view page source, what do you see on the #('#thumbs-down").replaceWith() line? – Kulix Mar 03 '16 at 06:15
Also is there any info in the javascript console? – Kulix Mar 03 '16 at 06:17
` 0 ` Javascript Console: Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/) tooltip.self-ff495cd6932165d4adceb3a8baec7340536f4d26b2fa14cd202e651ccc7f513a.js:24:1 Use of getPreventDefault() is deprecated. Use defaultPrevented instead. – Final Fantasy VIII Mar 03 '16 at 06:19
Not sure if this is gonna fix everything, but have you seen this post? http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h When you fix that, let me know what you see in the javascript console. – Kulix Mar 03 '16 at 06:22
yes, I saw that post 2 days ago. But the thing is I am integrating my bootstrap 4 by using the gem 'bootstrap', '~> 4.0.0.alpha3'. And, I tried to add the script `` in my application.html.erb, but still get the same error. – Final Fantasy VIII Mar 03 '16 at 06:28
Did you put the script before your bootstrap or after? I guess what I am think is that bootstrap is throwing up and breaking the javascript on your page. – Kulix Mar 03 '16 at 19:31
Also could you show us your javascript logic for when the user clicks the upvote or downvote button? – Kulix Mar 03 '16 at 19:32
I opened my network console in firefox, and when I clicked the like button, it showed that I got the 500 internal server error, still haven't known what is wrong with my code. – Final Fantasy VIII Mar 04 '16 at 16:44
That tells me that your backend code is breaking. Whats the stacktrace on the rails side? – Kulix Mar 04 '16 at 17:06
Also it might be helpful to see your models. – Kulix Mar 04 '16 at 17:16

score 0 · Answer 3 · answered Mar 03 '16 at 07:00

0

Did you define the routes for upvote/downvote?

And you should try:

$('#thumbs-up').text("<%= j render comment.get_upvotes.size %>");
$('#thumbs-down').text("<%= j render comment.get_downvotes.size %>");

answered Mar 03 '16 at 07:00

Tan Nguyen

3,281
1
18
18

Thank you for your help. Yes, I defined the route for them. Actually, everything works fine. The problem arises when I add ajax to them. I tried .text as you suggested but it still doesnt work. :( – Final Fantasy VIII Mar 03 '16 at 07:05

Like comment Ajax error

3 Answers3