AJAX vote update for a nested resource

Rails
1

I created a house scaffold which has many reviews and the reviews can be
voted on. All the reviews for a house are shown on the house show page.
Then each review has a vote button and a display to show the current
number of votes. I would like the vote button to vanish and the vote
count to change by AJAX after each vote.

reviews/_rev.html.erb

<% @house.reviews.each do |review| %>
posted <%= time_ago_in_words review.created_at %> ago by <%=
review.user.username %> |

<%= pluralize(review.votes_count, 'vote') %>

<% if current_user %>
<%= form_for(@vote, :remote => true) do |f| %>
<%= f.hidden_field “review_id”, :value => review.id %>
<%= f.hidden_field “user_id”, :value => current_user.id %>

<%= f.submit “vote” %>
.
.
.

#votes controller
def create

r = params[:vote][:review_id]
@review = Review.find(r)
@vote = @review.votes.build(params[:vote])
@vote.user_id = current_user.id

respond_to do |format|
  if @vote.save

    format.js {   }

#create.js.erb
$(document).ready(function(){
alert(‘voted’);

});

$("#votes").html("<%= review.votes_count %>")

As it stands now, the vote will be posted but the AJAX will not work.
It will say undefined variable ‘review’.

2

You’re defining @review as an instance variable, so you have to use it
as
one in the view:

$("#votes").html("<%= *@*review.votes_count %>")

3

That doesn’t quite work. When I use <%= @review.votes_count %> in the
create.js.erb file it updates the counter on the first review,
regardless of whether the vote was placed on the first review or not.

I thought maybe if I loop through the reviews again in the create.js.erb
file it might work.

<% @house.reviews.each do |review| %>
$("#votes").html("<%= review.votes_count %>")
<% end %>

This did not work either.

4

That’s to be expected with your HTML.

What you currently have will generate HTML that looks like the following
if
you have 3 reviews:

1 vote

2 votes

3 votes

$("#votes").html(“3 votes”)
$("#votes").html(“4 votes”)
$("#votes").html(“5 votes”)

See the problem?

The problem is that each paragraph tag has the same ID. jQuery will only
update the first one. Each paragraph needs to have a unique ID, then
your
JavaScript to update the paragraph needs to update the specific unique
ID.

Including the primary key in the HTML ID is a good solution:

Then your jQuery can update the specific paragraph that it needs to:

$("#review_<%= review.id %>").html("<%= review.votes_count %>")

5

Solution:
create.js.erb
<% @house.reviews.each do |review| %>
$("#review_<%= review.id %>").html("<%= pluralize(review.votes_count,
‘vote’) %>");
<% end %>

6

I’m not sure why it still isn’t working for me.

<%= pluralize(review.votes_count, 'vote') %>

create.js.erb
$(“review_<%= @review.id %>”).html("<%= @review.votes_count %>")

I don’t see any errors in the log.