Rails 3,如何构建link_to:remote => true,突出显示并淡出已删除的项目

Question

我是ajax的新手,但对Rails来说是合理的.我使用Paperclip设置了基本的多个附件.我有建议has_many资产.

在我的推荐编辑表单中,我希望用户能够删除资产,让它确认,突出显示和淡出该字段.

我的link_to代码是:

<%= link_to "Delete Attachment", destroy_asset_path(asset.id), :method => :delete, :confirm => "Are you sure?", :remote => true %>

挺直的.那么assets_controller(基于我的路线)

def destroy_asset
     @asset = Asset.find(params[:id])
     @asset.destroy

     respond_to do |format|
       format.js
     end
  end 

这有效,资产被破坏,这里是日志输出:

Started DELETE "/asset/11" for 127.0.0.1 at 2012-12-19 10:27:42 -0800
  Processing by AssetsController#destroy_asset as JS
  Parameters: {"id"=>"11"}
  Asset Load (0.2ms)  SELECT "assets".* FROM "assets" WHERE "assets"."id" = $1 LIMIT 1  [["id", "11"]]
   (0.1ms)  BEGIN
[paperclip] Scheduling attachments for deletion.
[AWS S3 200 0.112224 0 retries] head_object(:bucket_name=>"bestofbauer-dev",:key=>"assets/11/original/DaffyDuck.jpg")
  SQL (0.2ms)  DELETE FROM "assets" WHERE "assets"."id" = $1  [["id", 11]]
[paperclip] Deleting attachments.
[paperclip] deleting /assets/11/original/DaffyDuck.jpg
[AWS S3 204 0.117975 0 retries] delete_object(:bucket_name=>"bestofbauer-dev",:key=>"assets/11/original/DaffyDuck.jpg")
   (11.7ms)  COMMIT
Rendered assets/destroy_asset.js (0.4ms)
Completed 200 OK in 268ms (Views: 9.8ms | ActiveRecord: 14.1ms)

这是我在destroy_asset.js中尝试的内容

$("#asset_<%= @asset.id %>").effect('highlight', {color:"#999"}, 3000).remove();

但它既没有突出显示也没有淡化...任何想法？

提前致谢

Answer 1

我已经做了类似的事情,但我只是绑定了一个事件ajax:success(由不显眼的JS解雇),这意味着您不需要在控制器中更改任何内容或添加新的.js.erb模板.在我的编辑产品页面上,我显示与该产品相关的所有图像,每个图像都有一个删除链接:

<div id="image-container">
  <% @product.images.each do |image| %>                                                                                                                                  
    <div class="image">
      <%= image_tag image.file.thumb %>
      <%= link_to "Destroy", admin_image_destroy_path(image), class: "destroy-image",  method: :delete, confirm: "Are you sure?", remote: true %>
    </div>
  <% end %>
</div>

并在products.js.coffee中:

$("#image-container").on "ajax:success", "div a.destroy-image", (event, data, status, xhr) ->
  $(event.target).parent().fadeOut "slow", () ->
    $(this).remove() 

无需执行控制器返回的js.在淡出然后移除之前先做这个亮点是不会有太多工作.

更多信息:https://github.com/rails/jquery-ujs/wiki/ajax