繁体   English   中英

将AJAX添加到带有计数器的Rails 4 Like / Unlike按钮

[英]Adding AJAX to Rails 4 Like/Unlike Button with Counter

想知道我是否可以在尝试向喜​​欢/不喜欢的功能添加ajax方面获得一些帮助。 现在一切正常(没有ajax),但是我想添加ajax并因此避免每当单击了like / unlike时重新加载页面。 我已经花了很多小时动脑筋,在stackoverflow和其他任何地方阅读有关此问题的所有相关问题,无济于事。 因此,任何帮助将不胜感激。

我有一个Project(项目),User(用户),Likes(喜欢)模型(以及其他模型),并且用户具有单击“喜欢” /“不喜欢”(我使用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

意见/项目/ show.js.erb

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

我知道上面的show.js.erb是不正确的,而且,我对应该调用的内容或指向的内容完全感到困惑。 同样,我知道我可能缺少处理ajax请求的???。js文件。 再次感谢您提供任何有关此方法的帮助或指导,谢谢!

您正在重定向请求,然后到达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文件取决于您,以及希望每个链接在单击后的行为。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM