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

Question

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

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

上面的行在使用 ajax 时显示了一个 flash-notice 消息，我想要的是在延迟后自动隐藏这个 flash 消息

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

score 6 · Accepted Answer

用普通 html 模板中的 div 包装您的 Flash 消息

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

然后，在 js 模板中

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

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

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

PS您可以使用帮助程序来处理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)

score 1 · Accepted Answer

一个选择是<div class="flash-notice">已经在dom中并调用类似的东西

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

在您的 destroy.js.erb 中。这样，元素就已经存在了。

高温高压

2 回答 2