Rails 3 how to create link_to: remote => true that selects and disappears the deleted item

Question

I am new to ajax, but reasonable with Rails. I have a basic setup of multiple attachments using Paperclip. I have has_many assets recommendations.

In my recommendation editing form, I want the user to be able to delete the object, confirm it, select and blur the field.

The link_to code I have is:

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

Pretty straight forward. then asset_controller (based on my routes)

 def destroy_asset @asset = Asset.find(params[:id]) @asset.destroy respond_to do |format| format.js end end 

This works, and the resource is destroyed, and a log is issued here:

 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) 

Here is what I'm trying in destroy_asset.js

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

But this neither div emphasizes nor disappears ... any ideas?

Thank you in advance

Answer 1

I did something similar, but I just associated the event with ajax:success (launched by unobtrusive JS), which means you don’t have to worry about changing anything in your controller or adding a new .js.erb template. On my product editing page, all the images associated with this product are displayed, and each of them has a delete link:

 <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> 

And in products.js.coffee:

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

No need to execute js returned by the controller. There will not be much work to make this selection first before disappearing and then deleting.

Additional information: https://github.com/rails/jquery-ujs/wiki/ajax

Answer 2

Read your comment and come up with this idea. Save the identifier in another instance variable, then use it in the js.erb file:

 def destroy_asset @asset = Asset.find(params[:id]) @asset.destroy @asset_id = params[:id] respond_to do |format| format.js end end $("#asset_<%= @asset_id %>").effect('highlight', {color:"#999"}, 3000).remove();