：使用ajax进行投票/取消投票

Question

我在红宝石的投票系统中使用acts_as_votable。现在我可以投票/否决和更新柜台。但我想要的是投票，然后再投反对票，然后再投票，但我只能在令人耳目一新的情况下这样做。如果我投票，然后否决，我如何才能更新反投票为"-1"？

主计长：

  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

意见：

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

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

您可以创建两个文件upvote.js.erb和downvote.js.erb，然后添加您希望在该文件中发生的行为。

js代码：

$(document).ready(function() {

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

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

Upvote.js.erb：(文件名应该与控制器中的方法相同)

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