ruby ​​on rails: vote/unvoote mit ajax

Question

Ich benutze acts_as_votable für mein Abstimmungssystem in Ruby. Im Moment kann ich den Zähler abstimmen und den Zähler aktualisieren. Aber was ich will, ist zu wählen, und dann zum Beispiel runterstimmen und abstimmen, aber das kann ich nur mit erfrischend machen. Und wenn ich abstimmen und dann ablehnen, wie kann ich den Stimmzähler auf "-1" aktualisieren?

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 

Ansicht:

<%= 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 %> 

und die 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 1

Sie können es tun, indem zwei Dateien upvote.js.erb und downvote .js.erb und fügen Sie dann das Verhalten hinzu, das Sie in dieser Datei erwarten.

js-Code:

$(document).ready(function() { 

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

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

upvote.js.erb: (Dateiname sollte als das Verfahren in der Steuerung gleich sein)

$('.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 %>');