将 AJAX 添加到带计数器的轨道 4 喜欢/不喜欢按钮

Adding AJAX to Rails 4 Like/Unlike Button with Counter

本文关键字：喜欢 不喜欢 按钮 轨道 添加 AJAX 计数器      更新时间：2023-09-26

>想知道我是否可以在尝试将 ajax 添加到我的喜欢/不喜欢功能时获得一些帮助。现在一切正常（没有 ajax），但我想添加 ajax，从而避免在单击喜欢/不同时重新加载页面。我已经绞尽脑汁好几个小时了，在stackoverflow和其他任何地方阅读了有关此的所有相关问题，但无济于事。因此，任何帮助将不胜感激。

我

有一个项目、用户、喜欢模型（以及其他），用户可以点击喜欢/不像（我用了部分link_to助手）特定项目和计数器显示整体喜欢。

视图/项目/_like_button.html.erb

<div id="like_or_unlike">
<% if @project.liked?(current_user) %>
  <% like = @project.likes.where(:user_id => current_user.id).first %>
  <div class="unlike_button">
  <%= link_to "UnLike", like_path(id: like.id, project_id: @project.id), :method => :delete %>
  </div>
<% else %>
  <%= link_to "Like", project_likes_path(@project), :remote => true, :method => :post %>
<% end %>
</div>

控制器/likes_controller.rb

class LikesController < ApplicationController
  def index
    @user = current_user
    @projects = Project.all
  end
  def create
    @project = Project.find(params[:project_id])
    Like.create(:project => @project, :user => current_user)
    respond_to do |format|
      format.html { redirect_to project_path(@project), :notice => "Liked!" }
      format.js { render '/projects/show.js.erb' }
    end
  end
  def destroy
    @project = Project.find(params[:project_id])
    like = Like.find(params[:id])
    like.destroy
    respond_to do |format|
      format.html { redirect_to project_path(@project), :notice => "Unliked!" }
      format.js { render '/projects/show.js.erb' }
    end
  end
end

视图/项目/显示.js.erb

$('#like_or_unlike').html('<%= j(render partial: '/projects/like_button') %>');
$('.likeit').html('<%= @project.likes.count %>');

我知道上面的 show.js.erb 是不正确的，而且，我对应该叫什么或应该指向它完全困惑。同样，我知道我可能错过了一个???.JS文件来处理AJAX请求。同样，有关如何解决此问题的任何帮助或指导将不胜感激，谢谢！

您在到达respond_to块之前重定向请求。redirect_to之后的任何内容都不会运行。您还缺少用于关闭respond_to块的 end 语句。我假设您只想在 HTML 请求上重定向用户。如果是这样，请将create和destroy方法的结尾更改为：

respond_to do |format|
  format.html { redirect_to project_path(project), :notice => "Some message" }
  format.js { render 'your_javascript_file' }
end

现在你需要一些Javascript文件来实际更改网页。您是否需要一个或两个 Javascript 文件取决于您以及您希望每个链接在单击后的行为方式。

相关文章：