Rails destroy js.erb

Question

Can you tell me please, how I could remove object before destroy method will be end. When I use next pattern, removing object happen when photo was delete, but it take 1 or 3 or more seconds.

_form(edit action)

<% listing.photos.each do |photo|%>
    <%= image_tag photo.image.thumb, class: 'thumbnail', id: "test"%>
    <%= link_to "remove", photo_path(photo),class: 'btn btn-primary', method: :delete, data: { confirm: 'Are you sure?' }, remote: true %>

destroy.js.erb

$('#test').remove();

How I can use this pattern

_form:

<div id="test_<%= photo.id %>">
  <%= image_tag photo.image.thumb, class: 'thumbnail'%>
  <%= link_to "remove", photo_path(photo),class: 'btn btn-primary', method: :delete, data: { confirm: 'Are you sure?' }, remote: true %>

Destroy.js.erb:

 $('#edit_image_<%= @photo.id %>').remove();

Answer 1

If you want to remove the image from the DOM before its real destroying on server to avoid delay you can apply event.preventDefault() on the 'remove' button click. This will allow you to rewrite the normal behavior of the 'remove' button. Take a look at this example about performing some UI actions before the original event and then triggering it.

Also please notice that it's not a good idea to remove something from UI without being sure it's already removed in general. It's not clear enough for the user. So, maybe it would be better to hide the image at first and in case there will be a server error while destroying it you'll show it again and display some instructive message also.

UPD

Considering following markup

<div id="test_<%= photo.id %>">
  <%= image_tag photo.image.thumb, class: 'thumbnail' %>
  <%= link_to "remove", "#", class: 'remove btn btn-primary', data: { id: photo.id, url: photo_path(photo) } %>
</div>

another option is to rewrite remote: true with separate jQuery.ajax() call.

$('.btn.remove').click(function () {
  var $target = $(this).parents('#test_' + $(this).data('id'));

  $.ajax({
    url: $(this).data('url'),
    method: 'DELETE',
    beforeSend: function() {
      $target.hide() # hiding corresponding image
    },
    error: function () {
      $target.show() # revert hiding on error
      console.log("Sorry! Couldn't remove image.") # log message
    }
  })
})

Answer 2

There is a much cleaner way to do it without a js.erb template:

<div class="photo">
  <%= image_tag photo.image.thumb, class: 'thumbnail'%>
  <%= link_to "remove", photo_path(photo),class: 'destroy btn btn-primary', method: :delete, data: { remote: true, type: 'json', confirm: 'Are you sure?' } %>
<div>

Now just setup an ajax handler:

// app/assets/javascripts/photos.js
$(document).on('ajax:success', '.photo .destroy.btn', function(){
  $(this).parent('.photo').remove();
});

And set your controller to return the correct response code.

class PhotosController
  def destroy
    @photo = Photo.find(params[:id])
    @photo.destroy!

    respond_to do |format|
      format.json do
        head :no_content
      end
    end
  end
end

This keeps your client side logic in app/assets/javascripts where it can be cached and minified instead of spreading it around in a bunch of glorified script tags.