如何在使用ajax时自动隐藏flash消息

Question

我使用ujs发送ajax请求，在我的 destroy.js.erb 文件中，我有以下代码：

$("#wrapper").prepend('<div class="flash-notice"><%= escape_javascript(flash.discard(:notice)) %></div>');

上面一行显示使用ajax时的flash通知消息，我想要的是在延迟后自动隐藏此flash消息

（$(".flash-notice").delay(600).fadeOut(300);）不起作用，因为消息是动态添加的，而不是在DOM中存在

Answer 1

在普通的html模板中用div包装你的flash消息

<div id='notice'>
</div>

然后，在js模板中

$('#notice').html("<%=j msg %>").show().fadeOut(4000)

上面的msg方法将包含<div class='flash'>...

的完整html

然后，在淡出后，#notice仍然在DOM中display:none，您可以随时再次使用它。

P.S。您可以使用帮助程序处理Flash消息，这样您就不需要在模板中对其进行硬编码。

def flash_output(text, type)
  content_tag :div, class: "flash-#{type}" do
    text
  end
end

所以上面的js模板可以写到

$('#notice').html("<%=j flash_output(msg, 'notice') %>").show().fadeOut(4000)

Answer 2

一个选项是让<div class="flash-notice">已经在dom中并调用类似

的内容

$(".flash-notice").html('<%= escape_javascript(flash.discard(:notice)) %>');

你的destroy.js.erb中的

。通过这种方式，元素就会存在。

HTH