Rails 3, how to build link_to :remote => true that highlights and fades out a deleted item

Question

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

In my Recommendation edit form I want the user to be able to delete an asset, have it confirm, highlight and fadeout 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 the assets_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 asset is destroyed and here is the log output:

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 am trying in destroy_asset.js

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

But it neither highlights nor fades the div out... any ideas?

Thanks in advance

Answer 1

I've done something similar, but I just bound an event to ajax:success (fired by the unobtrusive JS), which means you don't need to bother changing anything in your controller or adding a new .js.erb template. On my edit product page I display all the images associated with that product, and each one 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. Wouldn't be much work to make this highlight first before fading out and then removing.

More info: https://github.com/rails/jquery-ujs/wiki/ajax

Answer 2

Read your comment and came up with this idea. Save the id in another instance variable then use it on your 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();