terrorista terrorista - 7 months ago 185
Ruby Question

ruby on rails: vote/unvote using ajax

I'm using acts_as_votable for my voting system in ruby. Right now I can vote/downvote and update the counter. But what I want is to vote, and then downvote and vote again for example, but I can only do that with refreshing. And if I vote and then downvote, how can I update the vote counter to "-1"?

controller:

def upvote
@improvement_action.upvote_from current_user #, :vote_scope => 'upvote'
respond_to do |format|
format.json { render json: { count: @improvement_action.get_upvotes.size } }
format.html {redirect_to :back}
end
end

def downvote
@improvement_action.downvote_from current_user#, :vote_scope => 'upvote'

respond_to do |format|
format.json { render json: { count: @improvement_action.get_downvotes.size } }
format.html {redirect_to :back}
end
end


view:

<%= link_to like_improvement_action_path(improvement_action), class:"btn btn-default stat-item like", method: :put, remote: true, data: { type: :json } do %>
<span class="fa fa-thumbs-up icon" aria-hidden="true"></span>
<span class="like_number"> <%= improvement_action.get_upvotes.size %></span>
<% end %>

<%= link_to unlike_improvement_action_path(improvement_action), class:"btn btn-default stat-item downvote", method: :put, remote: true, data: { type: :json } do %>
<span class="fa fa-thumbs-down icon" aria-hidden="true"></span>
<span class="unlike_number"> <%= improvement_action.get_downvotes.size %></span>
<% end %>


and the application.js:

$(document).ready(function() {

$('.like')
.on('ajax:success', function (e, data, status, xhr) {
$('.like_number').html(data.count)

})
.on('ajax:send', function () {
$(this).addClass('loading');
})
.on('ajax:complete', function () {
$(this).removeClass('loading');
})
.on('ajax:error', function (e, xhr, status, error) {
console.log(status);
console.log(error);
})

$('.downvote')
.on('ajax:success', function (e, data, status, xhr) {

$('.unlike_number').html(data.count);


})
.on('ajax:send', function () {
$(this).addClass('loading');
})
.on('ajax:complete', function () {
$(this).removeClass('loading');
})
.on('ajax:error', function (e, xhr, status, error) {
console.log(status);
console.log(error);
})
});

Answer

You can do it by creating two files upvote.js.erb and downvote.js.erb and then adding the behaviour which you expect to happen in this file.

js code:

$(document).ready(function() {

   $(document).on('click', '.like', function ( {
        $(this).addClass('loading');
   });

   $(document).on('click', '.downvote' ,function (){
        $(this).addClass('loading');
    });
});

upvote.js.erb:(file name should be same as the method in controller)

$('.like').removeClass('loading');
 //updated the below lines in both upvote.js.erb and downvote.js.erb
$('.like_number').html('<%= @improvement_action.get_upvotes.size %>');
$('.unlike_number').html('<%= @improvement_action.get_downvotes.size %>');

downvote.js.erb:

$('.downvote').removeClass('loading');
$('.like_number').html('<%= @improvement_action.get_upvotes.size %>');
$('.unlike_number').html('<%= @improvement_action.get_downvotes.size %>');
Comments