如何创建在 AJAX 形式 returns 错误后闪烁的消息？

Question

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

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

在我的控制器中我有这个

displayError('#{error_msg}')

调用此咖啡脚本...

@displayError = (msg) ->
  ...

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

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

Answer 1

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

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

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

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

Answer 2

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

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

如果您需要更复杂的东西（例如悬停时不要淡出、堆叠通知、关闭按钮等）或现成的样式 - 那么您可能想要使用 JS 库进行研究，例如 toastr.

Answer 3

这应该有助于您入门：

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

如何创建在 AJAX 形式 returns 错误后闪烁的消息？

How do I create a message that flashes after an AJAX form returns an error?

ruby-on-rails

ajax

ruby-on-rails-5

message

flash-message