Jquery 让flash消息在rails的同一页面中消失

我想让闪光信息在几秒钟后消失。所以我使用这些代码：

$(function() {
  $('.alert').slideUp(1500);
});

.alert是我添加到flash消息中的引导类

我的应用程序仅通过omniauth实现了用户登录/注销功能。（使用facebook和google plus）最后列出的登录/注销代码

当我登录时，flash消息像我想的那样消失了。但当我注销时，闪光灯并没有消失

但是如果我使用这些代码，这个函数将正常工作。（但与我想要的略有不同）

登录/退出代码：

class SessionsController < ApplicationController
  def create
    auth_data = request.env['omniauth.auth']
    auth = Authorization.find_by( provider: auth_data['provider'], uid: auth_data['uid'] ) 
    user = auth.nil? ? User.create_with_omniauth(auth_data) : auth.user
    session[:user_id] = user.id
    if !user.email
      redirect_to edit_user_path(user), :alert => "Please enter your email address."
    else
      redirect_to root_url, :notice => "Signed in!"
    end
  end

  def destroy
    reset_session
    redirect_to root_url, :notice => "Signed out!"
  end

  def new
  end

  def failure
    redirect_to root_url, :alert => "Authentication error: #{params[:message].humanize}"
  end
end

class sessioncontroller“请输入您的电子邮件地址。”
其他的
将\u重定向到root\u url，：notice=>“已登录！”
结束
结束
def销毁
重置会话
将\u重定向到root\u url，：notice=>“已注销！”
结束
def新
结束
def故障
将_重定向到根目录_url，：alert=>“身份验证错误：#{params[：message]。人性化}”
结束
结束

试试这个

$(function() {
  setTimeout(function(){
    $('.alert').slideUp(500);
  }, 1000);
});

---

以前我也有同样的问题，但现在通过这个问题解决了：
在您的代码中尝试此操作

<script type="text/javascript">
  $(document).ready(function(){
    setTimeout(function(){
    $('.alert').fadeOut();
    }, 2000);
  })
</script>

$（文档）.ready（函数（）{
setTimeout（函数（）{
$（'.alert'）.fadeOut（）；
}, 2000);
})

对于此问题，建议使用toastr.js。它提供了一种敬酒的行为，只需稍作修改，就可以完美地与引导程序和rails flash消息配合使用。它是完全可定制的，易于使用，此外还有一些其他优势

1。步骤

下载并将CSS文件放在app/assets/stylesheets目录中，将JS文件放在app/assets/javascripts中

2。步骤

打开并根据您的需要设置祝酒信息。将该页面上的javascript代码（不包括第一行）复制到您的app/assets/javascripts/application.js。（出于代码样式的目的，如果需要，可以将此代码放入新的JS文件中）

它应该是这样的（值可能有点不同）：

3。步骤

在注释末尾的app/assets/javascripts/application.js中需要toastr.js：

//= require toastr

并要求在应用程序/资产/样式表/application.css中使用toastr.css：

从现在起，只需一行代码，您就可以轻松地从任何文件中发送消息：

toastr["success"]("This is what i want to toast!");

4.步骤

在这一步中，我们告诉rails在设置flash消息时点燃一片吐司： 删除app/views/layouts/application.html.erb中现有的flash消息标记，并将其替换为以下代码：

<% unless flash.empty? %>
    <script type="text/javascript">
        <% flash.each do |f| %>
      <% type = f[0].gsub('alert', 'error').gsub('notice', 'info') %>
            toastr['<%= (type == 'danger' ? 'error' : type) %>']('<%= f[1] %>', '<%= type %>');
        <% end %>
    </script>
<% end %>

为此：

#toast-container > div {
      width: 300px;
    }

就这些。现在，每个flash消息都会被烘烤，以便在您在toastr.options中指定的时间段后消失

要设置flash消息，您只需要以下ruby代码。您可以使用引导警报标识符代替

：warning

（

：danger

，

：warning

，

：info

，

：success

）

---

当一个页面加载结束时的一个快照就可以完成这项工作时，让计时器保持运行是非常费力的。你确定这不是因为你正在使用

注意

作为注销消息吗？如果这是Rails 4应用程序，可能是因为TurboLink。您需要将您的函数绑定到

页面：load

以及

ready

（或禁用TurboLink）。正如SessionController所示，我在注销和登录时都使用通知。@LoganSerman是这个意思吗？`$（document）.bind（“load ready”，function（）{$（'.alert'）.slideUp（1500）；}）`但是这个代码也不起作用。

page:load

，而不是

load

。这个应该放在哪里？我试图将它添加到我的

应用程序.js

和

\u header.html.erb

中，但没有成功。仅供参考，由于

application.js

中的

/=require jQuery//=require jQuery.turbolinks//=require jQuery\u ujs

，我的应用程序中确实有jQuery。我遗漏了什么吗？很简单。谢谢

toastr["success"]("This is what i want to toast!");

<% unless flash.empty? %>
    <script type="text/javascript">
        <% flash.each do |f| %>
      <% type = f[0].gsub('alert', 'error').gsub('notice', 'info') %>
            toastr['<%= (type == 'danger' ? 'error' : type) %>']('<%= f[1] %>', '<%= type %>');
        <% end %>
    </script>
<% end %>

#toast-container > div {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  -moz-box-shadow: 0 0 12px #999999;
  -webkit-box-shadow: 0 0 12px #999999;
  box-shadow: 0 0 12px #999999;
  color: #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}

#toast-container > div {
      width: 300px;
    }

flash.now[:warning] = "This is an important warning"