1

我是 AJAX 的新手，需要一点帮助。我有一个posts_controller 和一个likes_controller：

用户可以“喜欢”或“不喜欢”帖子。现在，我正在尝试实现 AJAX，以便在用户“喜欢”帖子或“不喜欢”帖子时切换喜欢/不喜欢。

在 AJAX 之前，页面会刷新，视图中的代码将确定当前用户是否喜欢给定的帖子。我在视图中运行了一个 if 语句，根据结果，显示了两种不同的表单——如果帖子还没有被点赞，有一个表单可以“喜欢”帖子（创建操作），如果帖子已经被点赞了喜欢，有一种“不喜欢”帖子的形式（破坏动作）。

现在我已经使用 AJAX 实现了创建部分，类似动态发生但视图没有改变（我可以看到类似是通过终端/rails 控制台创建的，但链接上的文本保持不变）。我想知道在不刷新页面的情况下更新视图的最佳方法是什么？一旦通过 AJAX 发生类似事件，我需要使用“不喜欢”链接和表单更新“喜欢”链接和表单。是通过jquery做到这一点的唯一方法吗？

这是我的代码：likes_controller

class LikesController < ApplicationController

  def create
    @post = Project.find(params[:like][:likee_id])

    respond_to do |format|
      format.html{
        current_profile.like!(@post)
        redirect_to :back
      }
      format.js {
        current_profile.like!(@post)
      }
    end  

  end
  def destroy
    @post = Like.find(params[:id]).likee
    current_profile.unlike!(@post)
    redirect_to :back
  end
end

视图的片段：

%ul.dropdown-menu
  %li
    - if current_profile.like?(post)
      = form_for current_profile.likes.find_by_likee_id(post), :html => { :method => :delete } do |f|
        %a{:href => "javascript:void(0)", :onclick=>"$(this).closest('form').submit()"}
          %i.icon-heart.icon-large{:style => "color: #fedc73;"}
          Unlike this Post
      - else
        = form_for current_profile.likes.build(:likee_id => post.id), :remote => true do |f|
          = f.hidden_field :likee_id
          %a{:href => "javascript:void(0)", :onclick=>"$(this).closest('form').submit()"}
            %i.icon-heart-empty.icon-large
            Like this Post

创建.js.haml 文件：

:plain
  $(this).closest('form').submit()

任何帮助将不胜感激。非常感谢！

4

1 回答 1

0

你可以使用

$.post('url', data, function(returned_data){ $.('like_div').html(returned_data) })

但是，您可以使用 rails 生成一个链接，而不是手动创建链接：

= link_to url_for(...), :remote => true

这将起作用，即使 js 被禁用，并且您不需要任何形式。

- if current_profile.like?(post)
  = link_to url_for(:controller => :posts, :action => :unlike, :id => post.id), :remote => true
- else
  = link_to url_for(:controller => :posts, :action => :like, :id => post.id), :remote => true

当然，这个动作应该响应 .js 和 .html。在后一个中，您可以渲染整个视图，并且在 .js 中，您可以插入一段 js，它将链接 div 更改为这个刷新的视图。你还需要解释吗？

于 2012-04-29T18:10:37.663 回答