ruby-on-rails - 在Rails中使用Ajax删除记录

Question

我有一个用户页面，用户可以在其中键入和提交帖子。我正在使用Ajax允许用户从用户/显示页面执行此操作。当我尝试让用户删除帖子时，出现了我遇到的问题。当用户单击“删除”链接时，该帖子将从页面中删除。但是，当我重新加载页面时，帖子又回来了。它没有被摧毁。

我在不同的上下文中在用户/编辑页面上实现了相同的代码，并且可以正常工作，因为提交表单时帖子记录被破坏了。但是，在这种情况下，没有提交任何表单，我不确定如何使它正常工作。

这是我的设置:
:user has_many :posts:post belongs_to :user:post belongs_to :post_type:post_type has_many :posts
用户＃显示:
这是用户提交帖子的代码。这完美地工作。

<% if logged_in? && current_user == @user %>
  <% form_tag(:controller => "posts", :action => "create") do %>
    <div><%= text_area_tag(:message, nil, :size => "27x3") %></div>
    <div><%= submit_tag("Post") %></div>
    <div><%= label_tag(:post_type_id, "Update type?", :class => 'typeLabel') %></div>
    <div><%= collection_select(@posts, :post_type_id, PostType.all, :id, :name) %></div>
  <% end %>
<% end %>

这是显示帖子的代码，其中包括有争议的“删除链接”:

<% @user.posts.each do |c| %>
  <div class="postS">
    <div><%=h c.message %></div>
    <p><%=h c.post_type.name %></p>
    <p>Posted <%=h time_ago_in_words(c.created_at) %> ago</p>       
    <% if logged_in? && current_user == @user %>
        <%= link_to_function "- Delete Post", "if(confirm('Are you sure you want to permanently delete this post?')) $(this).up('.postS').remove()" %>                          
    <% end %>                   
<%end%>

PostsController

def destroy
  @post = Post.find(params[:id])
  if @post.destroy
    redirect_to :back
  else
    flash[:notice] = "Post failed to delete."
    redirect_to :back
end
end

让我知道是否有其他信息会有所帮助。谢谢!

更新2

我尝试按照下面的答案中的说明使用 link_to_remote。我同意这是正确的解决方案，但无法使其正常工作。我认为是因为路线问题。

我将帖子设置为这样的用户资源:

map.resources :users, :member => { :enable => :put } do |users|
  users.resources :posts
end  

当我实现答案中提供的 link_to_remote代码时，出现如下“无方法错误”异常:＃` undefined method post_url'

我尝试了一些调整来解决这个问题，但是我的尝试都没有奏效。有任何想法吗？我说对了，这与我的路线有关吗？

更新

Rails指南中的代码不起作用。我也尝试了许多变体。

我得到的最接近的是:

<%= link_to_remote "- Delete Post", :url => { :controller => 'posts', :action => 'destroy', :id => @user.posts, :method => :delete }, :confirm => "Are you sure you want to permanetly delete this post?", :success => "$(this).up('.postS').remove();" %>  

使用此代码，我单击删除链接，然后提示我接受删除。我接受之后，该帖子不会在屏幕上删除。但是，它已从数据库中删除。然后，当我重新加载页面时，该帖子实际上已从屏幕上删除。因此，这几乎可以正常工作，只是ajax删除操作现在不起作用。

但是代码似乎是错误的。注意我写了::id => @ user.posts

这对我来说似乎不对，但这是我使此代码完全起作用的唯一方法。看这对日志文件有什么作用:
处理PostsController＃destroy(适用于2009年12月17日02:07:05的127.0.0.1)[POST]

`Parameters: {"action"=>"destroy", "authenticity_token"=>"GZfPHUc2+qPa6Fj5jNogMyhuB4YUO+KlOdkwjM5NSvw=", "id"=>"12/11", "method"=>"delete", "controller"=>"posts"}  `

注意id =>“12/11”。那不是我想要的事情。

当我将id参数更改为:id => @ user.post时，出现“无方法错误”。 #User:0x3ddc20c的未定义方法`post'

当我尝试 :id => user_post_url(@user, @post)时，我得到: "user_post_url无法从[生成，然后它列出了该用户的所有数据库列值]。

当我尝试 :id => user_posts_url(@user, @posts)时，页面加载。当我单击删除链接时，系统提示我接受。然后什么也没有发生。当我重新加载页面时，该帖子仍然存在，并且从未从数据库中删除。

这就是我能想到的所有变化。有任何想法吗？

更新3

这是我的路线:

    user_posts GET    /users/:user_id/posts(.:format)          {:controller=>"posts", :action=>"index"}
               POST   /users/:user_id/posts(.:format)          {:controller=>"posts", :action=>"create"}
 new_user_post GET    /users/:user_id/posts/new(.:format)      {:controller=>"posts", :action=>"new"}
edit_user_post GET    /users/:user_id/posts/:id/edit(.:format) {:controller=>"posts", :action=>"edit"}
     user_post GET    /users/:user_id/posts/:id(.:format)      {:controller=>"posts", :action=>"show"}
               PUT    /users/:user_id/posts/:id(.:format)      {:controller=>"posts", :action=>"update"}
               DELETE /users/:user_id/posts/:id(.:format)      {:controller=>"posts", :action=>"destroy"}

更新4

根据下面来自ScottD的指导，我的代码现在如下所示:

<%= link_to_remote "- Delete Post", :url => user_post_url(@user,c), :method => :delete, :confirm => "Are you sure you want to permanently delete this post?", :success => "$(this).up('.postS').remove();" %>  

这解决了我的大部分问题，但是javascript删除操作仍未触发。换句话说，我单击删除链接。该帖子已从数据库中删除，但仍保留在屏幕上。当我重新加载页面时，帖子不见了。因此，问题在于以下部分没有被触发::success =>“$(this).up('。postS')。remove();”

当我如上所述直接单击删除链接时，日志中将发生以下情况:

Processing PostsController#destroy (for 127.0.0.1 at 2009-12-17 11:59:18) [DELETE]  
  Parameters: {"action"=>"destroy", "authenticity_token"=>"ccF1QNCGs9IlvbIYWwmQmcbi7kROgQsTZjM1dM687xA=", "_method"=>"delete", "id"=>"14", "controller"=>"posts", "user_id"=>"1"}  
  User Columns (3.2ms)   SHOW FIELDS FROM `users`
  User Load (29.6ms)   SELECT * FROM `users` WHERE (`users`.`id` = 1) ORDER BY name
  Post Columns (8.7ms)   SHOW FIELDS FROM `posts`
  Post Load (1.6ms)   SELECT * FROM `posts` WHERE (`posts`.`id` = 14) 
    app/controllers/posts_controller.rb:22:in `destroy'
  SQL (0.1ms)   BEGIN
    app/controllers/posts_controller.rb:23:in `destroy'
  Post Destroy (0.5ms)   DELETE FROM `posts` WHERE `id` = 14
    app/controllers/posts_controller.rb:23:in `destroy'
  SQL (0.9ms)   COMMIT
    app/controllers/posts_controller.rb:23:in `destroy'
Redirected to http://localhost:3000/users/1
Completed in 65ms (DB: 45) | 302 Found [http://localhost/users/1/posts/14]  

对我来说，这一切看起来都不错。因此，我不确定为什么无法删除javascript。

当我重新加载页面时，日志显示一切正常加载，并且帖子不见了(应该如此)。关于如何使javascript移除正常工作的任何想法？

更新＃5

这是基于我正在使用的 link_to_remote代码在html中当前生成的内容:

<a href="#" onclick="if (confirm('Are you sure you want to permanently delete this post?')) { new Ajax.Request('http://localhost:3000/users/1/posts/18', {asynchronous:true, evalScripts:true, method:'delete', onComplete:function(request){$(this).up('.postS').remove();}, parameters:'authenticity_token=' + encodeURIComponent('ccF1QNCGs9IlvbIYWwmQmcbi7kROgQsTZjM1dM687xA=')}); }; return false;">- Delete Post</a>  

这是当我单击页面上的“删除”文本时Firebug在控制台中显示的内容:

POST http://localhost:3000/users/1/posts/18  302 Moved Temporarily  
GET  http://localhost:3000/users/1 200 OK

Answer 1

问题是您正在使用的link_to_function仅调用Javascript函数，它不向应用程序发布任何内容。如果您想做Ajax，请尝试link_to_remote。这将进行AJAX调用，然后使您可以根据回调钩子(Hook)(例如:success或:complete)来调用javascript。

根据您的示例的示例:

<% if logged_in? && current_user == @user %>
  <%= link_to_remote "- Delete Post", :url => user_post_url(@user,c, :format => :json), :method => :delete  , :confirm => "Are you sure you want to permanetly delete this post?", :success => "$(this).up('.postS').remove();" %>                                                      
<% end %> 

查看 Rails API docs for link_to_remote 以获得更多示例。

您还需要更新您的Post Controller，以响应来自Ajax的删除请求。我使用新的json gem来渲染json。

def destroy
  @post = Post.find(params[:id])
  respond_to do |format|
    if @post.destroy
      format.html { redirect_to :back }
      format.json { :success => true }.as_json
    else
      flash[:notice] = "Post failed to delete."
      format.html { redirect_to :back }
      format.json { :success => false }.as_json
    end
  end
end

已更新，以反射(reflect)相关的嵌套路线。