Automatically hide flash messages on rails

Question

I need to automatically display flash messages in ruby ​​on rails.

My message code:

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

How do I automatically erase these messages?

Answer 1

This should work for you. You can specify the time range in parentheses. Add this to your Javascript. This is common to all:

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

For success warnings:

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

For warning:

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

Answer 2

to try:

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

this will cause your flash to disappear after 5000 ms.

Answer 3

This one will work with 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 4

Put this code in the application layout

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

And put this code at the bottom of the application layout

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

Answer 5

Added this code to application.html.erb his work throughout the application.

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

In 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

in the shared / flash_messages.html.erb layouts in the script section

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

it works for me. note: - if you declare a fadeout function in the application.js file, then delete it.

Answer 7

Do not put it in your application markup, just put jQuery in a javascript file that can run on every page and require it in application.js

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

This will hide the div alert after 5 seconds