更新投票计数器轨道ajax请求

Question

我有一个rails应用程序，其中我的帖子模型有评论，评论是可投票的。 我正在使用acts_as_votable。

我目前对评论工作进行了投票。 现在我正在尝试实现一些javascript，以便每次有人对评论进行投票时页面都不必刷新，以便投票通过。

这是我在评论控制器中的内容：

  def upvote_post_comment
  @post = Post.find(params[:post_id])
  @comment = @post.comments.find(params[:id])
  @comment.liked_by current_user

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

这就是我的看法：

<% if user_signed_in? && current_user != comment.user && !(current_user.voted_for? comment) %>


    <%= link_to image_tag(‘vote.png'), like_post_comment_path(@post, comment), method: :put, class: 'vote', remote: true, data: { type: :json } %> 
<a><%= "#{comment.votes.size}"%></a>

   <script>

    $('.vote')
  .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); })
  .on('ajax:success', function (e, data, status, xhr) { $(this).html(data.count); });

    </script>


  <% elsif user_signed_in? && (current_user = comment.user) %>

  <%= image_tag(‘voted.png')%><a><%= "#{comment.votes.size}"%></a>


  <% else %>

  <%= image_tag(‘voted.png')%><a><%= "#{comment.votes.size}"%></a>


    <% end %>

当我点击vote.png图标时，图标消失，投票计数显示而不是它。 如何将vote.png图标更改为voted.png图标并在指定占位符内更新投票计数？

<a><%= "#{comment.votes.size}"%></a>

呈现的HTML：

<p>

<p>comment test</p>

<a class="vote" data-method="put" data-remote="true" data-type="json" href="/1/comments/8/like" rel="nofollow">

<img src="/assets/vote.png" />
<span>0</span>

</a>


</p>

Answer 1

您将在成功通话中替换您的vote.png。

.on('ajax:success', function (e, data, status, xhr) { $(this).html(data.count); });

将“this”替换为comment.votes.size的类。

Answer 2

简单的答案：

您正在更新整个.vote元素（包括您的图像）。 你需要区分.vote img和.vote span ：

 <%= link_to like_post_comment_path(@post, comment), method: :put, class: 'vote', remote: true, data: { type: :json } do %> 
     <%= image_tag(‘vote.png') %>
     <%= content_tag :span, comment.votes.size %>
 <% end %>

.on('ajax:success', function (e, data, status, xhr) { $(this).find('span').html(data.count); }

---

重新保留答案

    #app/assets/javascripts/application.js
    $(document)
    .on('ajax:send', '.vote', function () { $(this).addClass('loading'); })
    .on('ajax:complete', '.vote', function () { $(this).removeClass('loading'); })
    .on('ajax:error', '.vote', function(e, xhr, status, error) { console.log(status); console.log(error); })
    .on('ajax:success', '.vote', function (e, data, status, xhr) { $(this).find("span").html(data.count); });

    #view
    <% if user_signed_in? && current_user != comment.user %>

     <% if !(current_user.voted_for? comment) %>

        <%= link_to like_post_comment_path(@post, comment), method: :put, class: 'vote', remote: true, data: { type: :json } do %> 
            <%= image_tag('vote.png') %>
            <%= content_tag :span, comment.votes.size %>
        <% end %>

      <% else %>
         <%= image_tag('voted.png')%><a><%= "#{comment.votes.size}"%></a> 
      <% end %>

   <% end %>