How to hidden session flash after few

#1

Hi

I try this

blade:

  @if (session()->has('message'))

      <div id="successMessage" class="alert alert-success">

        <button type="button" class="close" data-dismiss="alert">×</button>

        <i class="fa fa-times mr-1"></i>

          {{ session('message') }}

      </div>

  @endif

</div>

and jQuery:

$(document).ready(function(){
$("#successMessage").delay(5000).slideUp(300);

});

but it doesn’t work.

#2

try like this

<div class="toastrMsg">
  @if (session()->has('message')) 
     <div id="successMessage" class="alert alert-success"> 
     <button type="button" class="close" data-dismiss="alert">×</button> 
         <i class="fa fa-times mr-1"></i> 
         {{ session('message') }} 
     </div> 
  @endif 
</div>

$(document).ready(function(){
    window.livewire.on('alert_remove',()=>{
         setTimeout(function(){ $("#toastrMsg").fadeOut('fast');
         }, 5000); // 5 secs
});

and in the component emit an event ‘alert_remove’ to be captured by this script, I do something like this before and work, hope works for you, but this is an idea

#3

this code not correct :

$(document).ready(function(){
window.livewire.on(‘alert_remove’,()=>{
setTimeout(function(){ $("#toastrMsg").fadeOut(‘fast’);
}, 5000); // 5 secs
});

#4

Ufff…it’s a shame! Warner Bros - Account Settings — Mozilla Firefox 2021-02-19 17-03-58 00_00_00-00_00_30

#5

Let me be more clear…
in the blade:

@if(session()->has('message'))
            <div class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert">×</button>
                {{ session('message') }}
            </div>
        @endif
..........
$(document).ready(function(){
            window.livewire.on('alert_remove',()=>{
                setTimeout(function(){ $(".alert-success").fadeOut('fast');
                }, 3000); // 3 secs
            });
        });

in the component

public function save()
    {
        session()->flash('message','Errorrrrr');
        $this->emit('alert_remove');
        return;
2 Likes
#6

It worked fine, thank you very much

1 Like