Session Flash Livewire

i've button resends email in livewire, so i used to make wire:loading then after finishing flashing a message like this

        session()->flash('ReInviteManager', 'Invitation Resent successfully!', array('timeout' => 3000));

the issue i'm facing is it works only one time and need to refresh the page to work again,

i'm not really familiar how the flash works but is there any hint to make it works in every click or to be more specific works with every request made flashing this message ?

Nakov

3 years ago

Level 73

@karimali1337 and is the displaying of the flash message part of your component view? Or you have it on another page?

do you have something like this in your component:

@if (session()->has('ReInviteManager'))
<div class="alert alert-success">
    {{ session('ReInviteManager') }}
</div>
@endif

karimali1337

3 years ago

Level 2

@Nakov

                                @if ($message = Session::get('ReInviteManager'))

                                    <div x-data="{show: true}" x-init="setTimeout(() => show = false, 5000)" x-show="show"
                                         class="p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800"
                                         role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @endif

yes i have this part

Nakov

3 years ago

Level 73

@karimali1337 well, you do.. but once you set the alpine part to false there is no way it get's reset. So if you add a text within the @if and outside of the <div x-data element you will see the text each time.

karimali1337

3 years ago

Level 2

@Nakov i didn't get it totally but when i remove the alpine part it doesn't appear it keeps for ever..

Nakov

3 years ago

Level 73

@karimali1337 what I am saying is that this x-data will be initialized only the first time you open the page, so only once the show is equal to true and then only once is set to false and it never refreshes.

Something like this should work:

<div x-data="{show: false}" @test.window="show = true; setTimeout(() => show = false, 5000)" x-show="show"
             class="p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800"
             role="alert">
            <strong>{{ Session::get('ReInviteManager') }}</strong>
</div>

and after you set the flash message in the component, add this : $this->dispatchBrowserEvent('test');

Please or to participate in this conversation.