Rails破壞js.erb

Question

請問能否告訴我，如何在destroy方法結束前刪除對象。當我使用下一個模式時，當照片被刪除時刪除對象會發生，但它需要1或3秒或更長時間。

_form（編輯操作）

<% 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(); 

如何使用這種模式

_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

有一個更清潔的方式做到這一點沒有js.erb模板：

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

現在只要安裝一個Ajax處理程序：

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

和設置您的控制器正確返回響應代碼。

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 

這樣可以使你的客戶端邏輯app/assets/javascripts它可以被緩存和精縮，而不是在一堆榮耀腳本標籤內蔓延了。

Answer 2

如果您想要在DOM上刪除圖片，以避免延遲，您可以在點擊「刪除」按鈕上應用event.preventDefault()。 這將允許您重寫「刪除」按鈕的正常行爲。 看看this example關於在原始事件之前執行一些UI操作，然後觸發它。

另請注意，從用戶界面中刪除某些內容並不確定它是否已被刪除，這不是一個好主意。這對用戶來說不夠清楚。因此，也許最好先隱藏圖像，並在發生服務器錯誤的同時摧毀它，然後再顯示它並顯示一些指導性消息。

UPD

考慮下面的標記

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

另一個選擇是重寫remote: true具有獨立jQuery.ajax()通話。

$('.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 
    } 
    }) 
})