【问题标题】:Adding AJAX to Rails 4 Like/Unlike Button with Counter使用计数器将 AJAX 添加到 Rails 4 Like/Unlike 按钮
【发布时间】:2015-01-17 07:03:04
【问题描述】:

想知道是否可以在尝试将 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

views/projects/show.js.erb

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

我知道上面的 show.js.erb 是不正确的,而且我完全不知道应该调用什么或应该指向什么。同样,我知道我可能缺少一个 ???.js 文件来处理 ajax 请求。再次感谢任何有关如何解决此问题的帮助或指导,谢谢!

【问题讨论】:

  • 只会提到像&lt;% if @project.liked?(current_user) %&gt; 这样的视图中的 if 语句不是一个好习惯。您会注意到,这个简单的 if 语句会在您每次加载页面时进行数据库查询。最好把最初请求的likes数组存入JS,用JS检查是否存在。
  • 感谢您的提示和好点,一旦我让这个版本首先工作,肯定会重构。
  • 另外提一下:我认为在 Rails 中使用纯 JS 和 ajax 非常笨重并且导致代码复杂。如果你打算在你的应用程序中做一些大事,那么考虑使用 AngularJs。下面是一些关于如何实现它的好例子:github.com/mkwiatkowski/todo-rails4-angularjsgithub.com/sectore/CafeTownsend-Angular-Rails。但是,如果它只是一个用于学习的应用程序,那么使用它可能是一种矫枉过正的做法。你必须选择你自己。
  • 是的,完全同意并继续前进,我希望朝着 Angular JS 的方向前进。这只是一个学习项目。三个月前我对 ruby​​/rails 或 JS/AJAX/jQuery 一无所知,但我每天都在学习越来越多的东西。感谢您的提示和链接,非常感谢!

标签: javascript jquery ruby-on-rails ajax


【解决方案1】:

您在到达respond_to 块之前重定向请求。 redirect_to 之后的任何内容都不会运行。您还缺少一个 end 语句来关闭您的 respond_to 块。我假设您只想在 HTML 请求中重定向用户。如果是这样,请将您的 createdestroy 方法的结尾更改为:

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

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

【讨论】:

  • 嘿!非常感谢,这真的很有帮助!我完全想念redirect_to 是如何搞砸的。我实际上有正确的end 语句,但是在粘贴我的代码时不知何故错过了。我已经更新了上面的代码以反映这一点。我想我快到了。现在,除了 javascript 部分,一切正常。我可以点击喜欢按钮,但在我重新加载页面之前不会更新,因为我的 javascript 仍然搞砸了。我很抱歉,但我对 ajax(和一般的 javascript)很陌生,所以仍在尝试找出 show.js.erb 的代码,感谢您提供更多帮助!
  • 是的,老实说,听起来您需要多阅读 Rails 指南。将要通过 AJAX 动态更改的 HTML 分组到一个容器中。可能将 p 标签更改为 div 标签。为其分配一个 id 或一个类,然后使用调用的 Javascript 文件将当前内容替换为新内容。开头的div 标签看起来像&lt;div id="like_or_unlike"&gt;,而jQuery 是$('#like_or_unlike').html('&lt;%= render partial: 'like_button' %&gt;');
  • 嘿,再次感谢!在上面合并了您的输入和编辑的代码。还在views/projects/show.js.erb 中添加了另一行以呈现喜欢计数,并意识到我在project 中缺少@ controllers/likes_controller.rb 中。现在工作得很好,再次感谢您的帮助!!!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-07-30
  • 1970-01-01
  • 2023-04-11
  • 1970-01-01
  • 1970-01-01
  • 2017-12-31
  • 2011-11-05
相关资源
最近更新 更多