2014-11-06 21 views
5

我需要自動淡入淡出軌道上的ruby消息。自動隱藏導軌中的Flash消息

我的消息的代碼是:

<%= simple_form_for(@dashboard_user) do |f| %> 
<% if @dashboard_user.errors.any? %> 
<ul class="alert alert-danger"> 
    <% for message_error in @dashboard_user.errors.full_messages %> 
    <li> 
     <%= message_error %> 
    </li> 
    <% end %> 
</ul> 
<% end %> 

如何我自動褪色這些消息?

回答

8

這應該適合你。您可以指定括號內的時間跨度。將此添加到您的Javascript中。這是很常見的所有:

$(".alert").fadeOut(3000); 

對於警報的成功:

$(".alert-success").fadeOut(3000); 

對於警報的危險:

$(".alert-danger").fadeOut(3000); 
+0

是否可以更改警報成功消息和警報失敗消息的fade_out時間? – 2014-11-06 08:30:53

+0

這不會在Rails 4中使用Turbolinks – Abhinay 2016-01-18 19:06:03

4

嘗試:

<%= simple_form_for(@dashboard_user) do |f| %> 
<% if @dashboard_user.errors.any? %> 
    <span class="error_msgs"> 
    <ul class="alert alert-danger"> 
     <% for message_error in @dashboard_user.errors.full_messages %> 
     <li> 
      <%= message_error %> 
     </li> 
     <% end %> 
    </ul> 
    </span> 
    <script> 
    setTimeout("$('.error_msgs').fadeOut('slow')", 5000) 
    </script> 
<% end %> 

這將5000毫秒後淡出你的閃光。

+0

您的代碼工作正常..謝謝.. – 2014-11-06 06:50:21

+0

我如何在所有頁面中使用此代碼? – 2014-11-06 06:51:03

+1

將腳本移動到所有視圖通用的文件,並使用相同的類來跨度或任何你喜歡淡出的文件。 – 2014-11-06 06:53:23

1

將此代碼放在您的應用程序佈局

<div id="wrapper"> 
    <div id="page-wrapper"> 
    <div class="row"> 
    <div class="col-lg-12"> 
    <% flash.each do |name, msg| %> 
     <%= content_tag(:div, msg, :id=>"#{name}", :class `enter code here`=> "alert alert- info") %> 
    <%end%> 
    </div> 
    </div> 
</div> 
</div> 

而且將此代碼放在應用程序的底部離子佈局

<script type="text/javascript"> 
window.setTimeout(function() 
{ 
$("#notice").fadeTo(500, 0).slideUp(500, function() 
{ 
$(this).remove(); 
}); 
}, 5000); 
</script> 
3

這一個將與Turbolinks-3工作。

$(document).on('page:change', function(){ 
$(".alert").delay(2000).slideUp(500, function(){ 
     $(".alert").alert('close'); 
    }); 
}); 

Turbolinks 5:

$(document).on('turbolinks:load', function(){ 
    $(".alert").delay(2000).slideUp(500, function(){ 
      $(".alert").alert('close'); 
     }); 
    }); 
0

application.html.erb其作品遍佈應用程序添加了這些代碼。

<script> 
    setTimeout("$('.error_msgs').fadeOut('slow')", 6000) 
    setTimeout("$('.success_msgs').fadeOut('slow')", 3000) 
</script> 

view

<span class="success_msgs"> <% if notice %> 
     <p class="alert alert-success"> 
      <%= notice %> 
     </p> <% end %> </span> 

<span class="error_msgs"> <% if alert %> 
     <p class="alert alert-success"> 
      <%= alert %> 
     </p> <% end %> </span> 
0

在佈局共享/ flash_messages.html.erb下腳本

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

這對我的作品寫。 注意: - 如果您在application.js文件中聲明瞭fadeout函數,則從那裏刪除。

0

不要把它放在你的應用程序的標記,只是把一些在jQuery的,可以在每個頁面上運行JavaScript文件,並要求其在application.js

$(function() { 
    setTimeout(function() { 
    $('.alert').fadeOut('fast'); 
    }, 5000); 
} 

這將隱藏5秒後報警DIV