[英]Rails destroy js.erb
您能告诉我,在销毁方法结束之前我如何移除对象。 当我使用下一个图案时,删除照片时会发生移除对象的情况,但是需要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();
我如何使用这种模式
_形成:
<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();
如果要在服务器上真正销毁该图像之前将其从DOM中删除,以避免延迟,则可以在“删除”按钮单击上应用event.preventDefault() 。 这将允许您重写“删除”按钮的正常行为。 看一下有关在原始事件之前执行一些UI动作然后触发它的示例 。
另外请注意,从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()调用返回remote: true
。
$('.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
}
})
})
没有js.erb
模板,有一种更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
中,可以在其中进行缓存和最小化,而不是将其散布在许多美化的脚本标签中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.