添加 AJAX 到 Rails 4 Like/Unlike 带计数器的按钮
Adding AJAX to Rails 4 Like/Unlike Button with Counter
想知道我能否在尝试将 ajax 添加到我的 like/unlike 功能时获得一些帮助。现在一切正常(没有 ajax),但我想添加 ajax,从而避免在单击 like/unlike 时重新加载页面。我已经绞尽脑汁好几个小时,在 Whosebug 和其他任何地方阅读所有与此相关的问题,但无济于事。因此,我们将不胜感激任何帮助。
我有一个项目、用户、点赞模型(以及其他模型),用户可以点击喜欢/不喜欢(我使用 link_to 部分助手)特定项目和计数器显示总体喜欢.
views/projects/_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>
controllers/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 %>');
我知道上面的显示。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 文件取决于您以及您希望每个 link 在单击后的行为方式。
想知道我能否在尝试将 ajax 添加到我的 like/unlike 功能时获得一些帮助。现在一切正常(没有 ajax),但我想添加 ajax,从而避免在单击 like/unlike 时重新加载页面。我已经绞尽脑汁好几个小时,在 Whosebug 和其他任何地方阅读所有与此相关的问题,但无济于事。因此,我们将不胜感激任何帮助。
我有一个项目、用户、点赞模型(以及其他模型),用户可以点击喜欢/不喜欢(我使用 link_to 部分助手)特定项目和计数器显示总体喜欢.
views/projects/_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>
controllers/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 %>');
我知道上面的显示。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 文件取决于您以及您希望每个 link 在单击后的行为方式。