使用 ajax (destroy.js.erb) 删除对象的 JavaScript 不起作用

Question

在我的 Rails 3 应用程序中，我允许用户将奖励添加到他们的个人资料中。使用 Rails UJS 我得到 create使用ajax。但是，我一辈子都无法得到 destroy上类。查看我的服务器日志，看起来它在工作，但是 @award除非我刷新我的个人资料页面，否则不会被删除。

我使用的代码来 self 在 Beginning Rails 3 中关注的教程.如果有人能帮我弄清楚我的代码中出了什么问题，我将不胜感激。

我的 awards_controller.rb :

def create
  @award = Award.new(params[:award])
  if @award.save!
    respond_to do |format|
      #format.html { redirect_to profile_path(@profile) }
      format.js { }
    end
  else
    respond_to do |format|
      #format.html { redirect_to profile_path(@profile)}
      format.js { render 'fail_create_award.js.erb' }
    end
  end
end

def destroy
  @award = Award.find(params[:id])
  @award.destroy
  respond_to do |format|
    #format.html { redirect_to profile_path(@profile) }
    format.js { render :nothing => true }
  end
end

我的 create.js.erb :

$('ul#awardInfo').append("<%= escape_javascript(render(@award)) %>");
$('#new_award')[0].reset();

我的 destroy.js.erb :

$("ul#awardInfo<%= (@award) %>").remove();

我用于删除奖项的表格，如果奖项属于/由 current_user 创建，则在奖项旁边显示为“x” :

<li>-&nbsp;<%= award.body %><% if @profile = current_user.profile %><span class="delete"><%= link_to 'x', award_path(award), :method => :delete, :remote => true, :confirm => "Are you sure you want to remove this award?", :class => "delete_award" %></span><% end %></li>

在我单击“删除”时(但在刷新页面之前)在我的服务器日志中:

Started DELETE "/awards/8" for 127.0.0.1 at 2012-01-11 21:34:58 -0500
  Processing by AwardsController#destroy as JS
  Parameters: {"id"=>"8"}
  Award Load (1.0ms)  SELECT "awards".* FROM "awards" WHERE "awards"."id" = '8' LIMIT 1
  SQL (0.2ms)  BEGIN
  SQL (1.4ms)   SELECT a.attname, format_type(a.atttypid, a.atttypmod), d.adsrc, a.attnotnull
 FROM pg_attribute a LEFT JOIN pg_attrdef d
 ON a.attrelid = d.adrelid AND a.attnum = d.adnum
 WHERE a.attrelid = '"awards"'::regclass
 AND a.attnum > 0 AND NOT a.attisdropped
 ORDER BY a.attnum

  AREL (0.6ms)  DELETE FROM "awards" WHERE "awards"."id" = 8
  SQL (2.3ms)  COMMIT
Rendered text template (0.0ms)
Completed 200 OK in 31ms (Views: 1.3ms | ActiveRecord: 5.4ms)

更新:如果我删除 render :nothing => true从我的销毁行动来看，它实际上并没有取消奖励。我的日志显示如下:

Started DELETE "/awards/3" for 127.0.0.1 at 2012-02-03 07:54:34 -0500
  Processing by AwardsController#destroy as JS
  Parameters: {"id"=>"3"}
  Award Load (238.1ms)  SELECT "awards".* FROM "awards" WHERE "awards"."id" = '3' LIMIT 1
  SQL (0.4ms)  BEGIN
  SQL (1.6ms)   SELECT a.attname, format_type(a.atttypid, a.atttypmod), d.adsrc, a.attnotnull
 FROM pg_attribute a LEFT JOIN pg_attrdef d
 ON a.attrelid = d.adrelid AND a.attnum = d.adnum
 WHERE a.attrelid = '"awards"'::regclass
 AND a.attnum > 0 AND NOT a.attisdropped
 ORDER BY a.attnum
  AREL (97.3ms)  DELETE FROM "awards" WHERE "awards"."id" = 3
  SQL (45.8ms)  COMMIT
Rendered awards/destroy.js.erb (1.1ms)
Completed 200 OK in 954ms (Views: 531.9ms | ActiveRecord: 383.2ms)

更新 2: 所以如果我去检查 HTML 会发生奇怪的事情:

• 如果我查看源代码，我实际上看不到任何奖项。
• 如果我检查该元素，我会看到以下内容: <li>-&nbsp;test<span class="delete"><a href="/awards/4" class="delete_award" data-confirm="Are you sure you want to remove this award?" data-method="delete" data-remote="true" rel="nofollow">x</a></span></li>

<li>是实际创建的奖励。我有一个 award.rb模型belongs_to :profile .如果个人资料奖项属于我的个人资料，我会看到一个删除选项，这就是 <span> 的内容是为了。

Answer 1

将 format.js { render :nothing => true } 放在你的 destroy 操作中大概是告诉 Rails 不 渲染你的 destroy.js.erb.

使用与 create 操作相同的 format.js { } 应该指示 Rails 呈现 destroy.js.erb 并随后执行所需的操作。

更新:

从上面的代码来看，实际的奖励 HTML 中似乎没有任何内容可用于为 remove 调用选择 on。

我建议确保 li 元素包含带有奖励 ID 的 ID 属性。像这样的东西:

<li id="award-<%= @award.id %>">

然后，要删除奖励，请选择其 li 元素并按如下方式删除:

$('li#award-<%= @award.id %>').remove();

在我看来，唯一剩下的问题是 jQuery 调用没有选择正确的元素，或者根本没有选择任何元素来调用 remove。给 li 一个唯一的 ID，然后选择要删除的 ID 应该使销毁操作正确呈现。