Question

当有人使用ajax点击“赞”按钮时，我想在我的“提示”页面上更新喜欢的数量

按钮在想法#show视图中显示如下（当前指向喜欢的路径#starn without ajax）

  - unless signed_in? and current_user.likes? @idea
    = link_to "Like this idea!", idea_likes_path(@idea), :class => "btn btn-large btn-block btn-success", method: :post, id: 'like_button'
  - else
    = link_to "Unlike this idea", idea_like_path(@idea, current_user.idea_like(@idea)), :class => "btn btn-large btn-block btn-inverse", method: :delete

我的application.js有以下内容：

jQuery.fn.ajaxFormSubmit = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

$(document).ready(function() {
  $("#like_button").ajaxFormSubmit();
})

LikesController #create方法：

  def create
    like = Like.new
    @idea.likes << like
    current_user.likes << like

    respond_to do |format|
      format.html { redirect_to @idea }
      format.js
    end
  end

最后是create.js.erb：

$("#like_count").html("<%= pluralize(@ideas.likes.count, 'Like') %>");

使用上面的代码，按钮仍会刷新整个页面。如何使AJAX工作？

Answer 1

您可以使用remote帮助程序的link_to选项在不编写任何Javascript的情况下提交AJAX请求。

= link_to "Like this idea!", idea_likes_path(@idea), :class => "btn btn-large btn-block btn-success", method: :post, remote: true

这将以LikesController#create格式向JS操作发送AJAX请求。

请参阅：http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to

Answer 2

试试UJS。

= link_to "Like this idea!", idea_likes_path(@idea), :class => "btn btn-large btn-block btn-success", method: :post, id: 'like_button', remote: true

这里remote:true可以解决问题。

然后在你的控制器中。

def create
@idea = Idea.where(id: params[:idea_id]).first
current_user.likes.create({idea_id: @idea.id})

    respond_to do |format|
      format.html { redirect_to @idea }
      format.js
    end
  end

将ajax请求绑定到link_to

2 个答案: