如何创建在 AJAX 表单返回错误后闪烁的消息？答案

【问题标题】：How do I create a message that flashes after an AJAX form returns an error?如何创建在 AJAX 表单返回错误后闪烁的消息？
【发布时间】：2017-05-16 16:34:46
【问题描述】：

我正在使用 Rails 5。我想创建一条消息，在我提交 AJAX 表单并返回错误后在我的页面上闪烁。我没有使用 twitter 引导程序，并且只有在它不会破坏我已经拥有的任何其他样式的情况下才会考虑使用它。无论如何，在我看来我有这个

<div id="error_explanation" class="alert alert-success"></div>

在我的控制器中我有这个

displayError('#{error_msg}')

调用这个咖啡脚本...

@displayError = (msg) ->
  ...

  $("#error_explanation").text(msg)

正如您所猜测的，现在，消息只是以纯文本形式显示。我希望它闪烁然后消失。我该怎么做？

【问题讨论】：

我之前用过gem unobtrisive_flash，它很容易实现。 github.com/leonid-shevtsov/unobtrusive_flash

标签： ruby-on-rails ajax ruby-on-rails-5 message flash-message

【解决方案1】：

如果您只需要消息在设定的时间后淡出，则将 CoffeeScript 的最后一行更改为：

$("#error_explanation").text(msg).delay(3000).fadeOut()

如果您需要一些更复杂的东西（例如，悬停时不要淡出、堆叠通知、关闭按钮等），或者准备好样式 - 那么您可能需要使用 JS 库进行调查，例如 toastr。

【讨论】：

这看起来很有希望。这是宝石吗？还是我只是在复制 JS/CSS 文件？
@Dave：要么复制到您的项目中，要么使用存储库自述文件中提供的 CDN 链接。有一个toastr-rails gem，但好像有一段时间没有更新了。

【解决方案2】：

这应该可以帮助您入门：

show_ajax_message = (msg, type) ->
  $("#flash-message").html "<div id='flash-#{type}'>#{msg}</div>"
  $("#flash-#{type}").delay(5000).slideUp 'slow'

$(document).ajaxComplete (event, request) ->
  msg = request.getResponseHeader("X-Message")
  type = request.getResponseHeader("X-Message-Type")
  show_ajax_message msg, type

https://www.google.com/search?q=flash+messages+session+rails+ajax

【讨论】：

【解决方案3】：

仅基于您的咖啡脚本，方法如下：

Not familiar with CoffeeScript and its syntax, so here's plain JS code.

setTimeout(function() { $('#visitLink').hide() }, 2000);

这将使消息在 2 秒后消失。

【讨论】：

错误消息实际上在我的问题中包含的 id = "error_explanation" 的 DIV 中。即使将“#error_explanation”替换为访问链接，您的代码也会使其立即消失，但典型的 Flash 通知会淡出，并且还具有更多样式以使消息对用户更加突出。我如何模拟所有这些？
如果你想添加动画等等，你有两个选择。您使用 jQuery 的“可见”和“隐藏”切换一个类，并使用带有 CSS 的变换应用您的动画。或者，使用 jQuery api.jquery.com/animate 。虽然我会推荐 CSS，因为它对用户更容易且性能更高。
至于为什么它会立即消失，我需要更多的代码来看看为什么会这样。
它立即消失，因为"$('#...').hide()" 立即生效。