nascondi automaticamente i messaggi flash nei binari

Question

Ho bisogno di auto sbiadire i messaggi flash in ruby ​​su binari.

Il mio codice messaggio è:

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

Come ho Auto Fade questi messaggi?

Answer 1

Questo dovrebbe funzionare per voi. È possibile specificare l'intervallo di tempo tra parentesi. Aggiungi questo al tuo Javascript. questo è comune per tutti:

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

all'avviso di successo:

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

all'avviso di pericolo:

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

Answer 2

prova:

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

questo svanirà il flash dopo 5000ms.

Answer 3

inserire questo codice nel layout dell'applicazione

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

E Inserisci questo codice nella parte inferiore dell'applicativo la layout ione

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

Answer 4

Questo funzionerà con 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

aggiunto queste codice application.html.erb sue opere in tutto l'applicazione.

<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

nei layout condiviso/flash_messages.html.erb scrivere sotto sceneggiatura

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

questo funziona per me. nota: - se stai dichiarando la funzione fadeout nel file application.js, cancella da lì.

Answer 7

Non metterlo nel vostro markup applicazione, basta mettere un po 'di jQuery in un file JavaScript che può essere eseguito in ogni pagina, e richiedono in application.js

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

Questo nasconderà il div avviso dopo 5 secondi