Ho to add ajax to voting buttons and refresh result div

Question

I am trying to implement facebook-linke interaction with buttons voting. I have the following code for my reviews page;

% @school_reviews.each do |school_review| %>                   
      <div class="widget-box ">                                           
        <div class="widget-header widget-header-small padding-16">                              

          <div class="widget-toolbar no-border">
            <span class="vbar"></span>                  
                    <span class="vbar"></span>
                    <small class="theme-color"> <%= school_review.created_at.strftime(" %d-%b %Y  ") %> </small>      
                  <span class="vbar"></span>                  
                  <span class="vbar"></span>
                  <% if  can? :destroy, school_review %>
                    <%= link_to(school_review, method: :delete, data: { confirm: 'Are you sure?' }, class: 'red') do %>
                      <i class="icon-trash bigger-130"></i>
                    <% end %> 
                  <% end %> 
            <span class="vbar"></span>            
          </div>                                                
        </div>
        <div class="widget-body">
          <div class="widget-main padding-16">
              <%= simple_format(school_review.description) %>  
              <div class="">
                <span class="review-votes theme-color"> 
                 <span id= <%= "up_votes_count-#{school_review.id}" %>> <%= school_review.get_likes.size  %> </span>
                 <span> 
                   <%= link_to vote_up_path(id: school_review.id), remote: true do %>           
                      <i class="fa fa-thumbs-up theme-color "></i>
                    <% end %>
                  </span>
                </span>
                <span class="review-votes theme-color">
                  <span id= <%= "down_votes_count-#{school_review.id}" %>> <%= school_review.get_dislikes.size %> </span>
                  <span> 
                    <%= link_to vote_down_path(id: school_review.id), remote: true do %>        
                      <i class="fa fa-thumbs-down theme-color "></i>
                    <% end %> 
                  </span>                
                </span>
              </div>            
          </div>  
        </div>                         
      </div>
      <div class="hr hr-12"></div>
    <% end %>

and vote_up.js.erb looks like this;

getElementById(<%= "up_votes_count-#{@school_review.id}" %>).html(<%= "@school_review.get_likes.size" %>);

and vote_down.js.erb looks like this;

getElementById(<%= "down_votes_count-#{@school_review.id}"%>).html("<%= @school_review.get_dislikes.size %>");

However the vote counts are not being refreshed. Any help?

Answer 1

To make it work you need to follow these steps:

a. Create a route for your custom action. You have already done that with down_vote_path and up_vote_path.

b. Add remote:true option to your button from which you want to call the ajax:

<%= button_tag vote_up_path(id: school_review.id), remote: true do %>                    
  <i class="fa fa-thumbs-up theme-color "></i>
<% end %>

c. In your controller method vote_up you need to add respond_to block

def vote_up
  @school = School.find(params[:id])
  @school.update(#your attribute)
  respond_to do |format|
    format.html {redirect_to your_path}
    format.js {}
  end
end

d. In your vote_up.js.erb file you need to update `<%= school_review.get_likes.size %>. For this first of all you'll have to change your html and give some id or class to the portion you want to update

<span id="up_vote_count"><%= school_review.get_likes.size  %></span>

Now you have something to target inside your js.erb file so you can simply do

$("#up_vote_count").html("<%=j @school.likes.size >"); #need to replace the ruby part with code which'll give your like count.

This will update your span with new like counts. You can follow the same approach for down voting too.

Edit:

try:

$("<%=j up_votes_count-#{@school_review.id} %>").html("<%= @school_review.get_likes.size %>");