充当可投票的 Ajax 投票大小而不更新 Rails

Question

我在我的 rails 4 应用程序中使用这些行为作为可投票的宝石。

我终于使用 ajax 让它工作了，所以当用户投票时页面不会刷新，但是，vote.size 在页面刷新之前不会更新。

这是我的控制器操作：

  def upvote 
    @article = Article.find(params[:article_id])
    @subarticle = @article.subarticles.find(params[:id])
    session[:voting_id] = request.remote_ip
    voter = Session.find_or_create_by(ip: session[:voting_id])
    voter.likes @subarticle
    respond_to do |format|
      format.html {redirect_to :back }
      format.json { render json: { count: @subarticle.get_upvotes.size } }
    end
  end

并查看：

<%= link_to like_article_subarticle_path(@article, subarticle), class: "vote", method: :put, remote: true, data: { type: :json } do %>
  <button type="button" class="btn btn-success btn-lg" aria-label="Left Align" style="margin-right:5px">
    <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Helpful
  </button><span class="badge" style="margin-right:10px"><%= subarticle.get_upvotes.size %></span>
<% end %>

<script>
    $('.vote')
  .on('ajax:send', function () { $(this).addClass('loading'); })
  .on('ajax:complete', function () { $(this).removeClass('loading'); })
  .on('ajax:error', function () { $(this).after('<div class="error">There was an issue.</div>'); })
  .on('ajax:success', function(e, data, status, xhr) { $(this).html("Thank you for voting!"); });
</script>

截至目前，当用户投票时，它完全摆脱了“帮助”按钮和点赞大小，并显示html“感谢您的投票”。

我无法弄清楚如何保留按钮并将 upvote.size 更新为正确的数字。我曾尝试为 upvote 大小分配一个类，然后使用如下内容：$('.item-class').html(data.count) 但没有运气。

有什么建议吗？谢谢！

Answer 1

$('.item-class').html(data.count)

item-class 似乎没有在您的模板中的任何地方声明...但即使这样做了，如果您这样调用它，它可能会匹配页面上的多个内容，因此此替换不会没用。

按钮被替换的原因是您正在替换“this”的html（定义为标有.vote类的整个部分）

如果您只想替换 .vote 部分中的 item-class（即保持按钮不变），那么您需要 a) 添加带有“item-class”类的内容和 b) 减少要替换的内容到那个。例如：

$(this).first('.item-class').html("Thank you for voting!");

（请注意我没有对此进行错误测试 - 您可能需要先 google javascript 以确保这是正确的用法）。