How can I hide session flash using JQuery in Livewire

What seems to be the problem:

Can’t hide session flash alert after few seconds in JQuery, It works with normal HTML but I can’t figure out how to do it in Livewire with Turbolinks.

Steps to Reproduce:

Here is my JQuery Snippet

$(document).on('turbolinks:load', () => {
  setTimeout(function() {
    $('#alert').fadeOut('fast');
  }, 300);
});

Here is my blade alert snippet

@if (session()->has('error'))
    <div id="alert" class="alert alert-danger alert-dismissible fade show mt-2">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <i class="fa fa-times mr-1"></i>
        {{ session('error') }}
    </div>
@endif

Are you using the latest version of Livewire:

Yes

Do you have any screenshots or code examples:

PS: All code lives here https://github.com/taskord/taskord

document.addEventListener("livewire:load", function(event) {
    window.livewire.hook('afterDomUpdate', () => {
        setTimeout(function() {
            $('#alert').fadeOut('fast');
        }, 300);
    });
});
1 Like

Thanks @dustinfabre It works!