Rails autorefresh div on clicking voting button using ajax

Question

I wish to auto refresh a div calculating the total number of votes after someone has clicked the vote button. The vote is registered but the refreshing does not happen.

I have done something like this;

<% @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="voting-banner">
            <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 %>");

while vote_down.js.erb looks like thisl

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

and the controller action look like this;

def vote_up
  @school_review = SchoolReview.find(params[:id])
  @school_review.liked_by current_user

   respond_to do |format|
      #format.html {redirect_to school_reviews_path}
      format.js { }
    end    
end

def vote_down
  @school_review = SchoolReview.find(params[:id])
  @school_review.downvote_from current_user

   respond_to do |format|
      #format.html {redirect_to school_reviews_path}
      format.js { }
    end    
end

In the console, i get

    GET http://0.0.0.0:3000/vote_up [HTTP/1.1 200 OK  290ms]
GET http://0.0.0.0:3000/vote_up [HTTP/1.1 304 Not Modified  86ms]

Thank you

It should be `document.getElementById` instead of just `getElementById` in your view. Open a console in a browser, copy your ajax response and run it in the console to see what is wrong with your response — cristian, Jun 09 '14 at 21:18

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

JQuery

You're getting confused between JQuery & pure JS

--

Your call of getElementByID is a javascript call - and needs to be attached to the document object, as mentioned by Octopus-Paul, so that's your first problem

The second issue is you're calling html on the respective objects. .html is a JQuery function; the javascript equivalent being .innerHTML

You'll be better doing this:

#app/views/controller/action.html.erb
$("<%=j 'up_votes_count-#{@school_review.id}' %>").html("<%=j @school_review.get_likes.size %>");

This uses pure JQuery, which should allow you to append the respective data to your page

edited May 23 '17 at 11:49

Community

1
1

answered Jun 10 '14 at 09:35

Richard Peck

76,116
9
93
147

am getting NoMethodError - undefined method `gsub' for 16:Fixnum: actionpack (3.2.13) lib/action_view/helpers/javascript_helper.rb:30:in `escape_javascript' which i think is due to the ID number-16 – acacia Jun 10 '14 at 09:39
Okay, let me refactor for you :) – Richard Peck Jun 10 '14 at 09:40

Rails autorefresh div on clicking voting button using ajax

1 Answers1

Linked