tự động ẩn các tin nhắn flash trong đường ray

Question

Tôi cần tự động làm mờ các thông báo flash trong ruby ​​trên thanh ray.

mã tin nhắn của tôi là:

<%= 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 %> 

Làm thế nào tôi tự động mờ dần những tin nhắn này?

Answer 1

Điều này sẽ phù hợp với bạn. Bạn có thể chỉ định khoảng thời gian trong dấu ngoặc vuông. Thêm cái này vào Javascript của bạn. đây là chung cho tất cả:

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

Đối với thành công cảnh báo:

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

Đối với nguy cơ cảnh báo:

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

Answer 2

thử:

<%= 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 %> 

này sẽ mờ dần flash của bạn sau khi 5000ms.

Answer 3

Nơi mã này trong cách bố trí ứng dụng của bạn

<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> 

Và Đặt mã này ở cuối ứng dụng bố cục ion

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

Answer 4

Điều này sẽ hoạt động với 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'); 
     }); 
    }); 

Answer 5

thêm các mã trong application.html.erb tác phẩm của mình trên tất cả các ứng dụng.

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

Trong 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> 

Answer 6

trong bố trí chia sẻ/flash_messages.html.erb viết dưới kịch bản

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

làm việc này cho tôi. lưu ý: - nếu bạn khai báo hàm fadeout trong tệp application.js thì hãy xóa từ đó.

Answer 7

Đừng đặt nó trong đánh dấu ứng dụng của bạn, chỉ cần đặt một số jQuery trong một file javascript có thể chạy trên tất cả các trang, và yêu cầu nó trong application.js

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

này sẽ ẩn div cảnh báo sau 5 giây