Hiding element after X seconds with Alpine

Hi,

I think it's all in the title :D. I can't find a way to hide a flash message after 3 seconds with Alpine. What I have so far:

                <div x-data="{ show: true }" x-show="show">
                    <div>
                        {{ session('status') }}
                    </div>
                </div>
                <script>
                    setTimeout(() => show = false, 3000);
                </script>

Any idea? Thanks

Sergiu17

5 years ago

Best Answer

Level 60

Hi, depends on how you will use it, but, you could do something like this

<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)">

26 likes

Aymakan-IT

4 years ago

Level 2

Thank you very much @sergiu17

1 like

yucelfaruksahan

3 years ago

Level 1

@Sergiu17 I specifically opened an account just to reply to this comment. You really save me a ton of time and made my day. God bless you my friend, thanks a lot :)

3 likes

wilberth-cl

3 years ago

Level 1

@Sergiu17, Using it with Livewire, the first time it works fine the other times it throws this error when disappearing flash messages from laravel: module.esm.js:416 Alpine Expression Error: alert is not defined Expression: "alert "

Romain

5 years ago

Level 30

Thanks @sergiu17 that worked perfectly. It's used to hide a session flash message.

1 like

Rretzko

5 years ago

Level 15

Hi - Trying to piggyback on this issue. I had a similar question, which @Sergiu17 answered and it also solved my immediate problem. However, if I re-save the form within the same session, the div remains hidden. For example: I have a form for the user's names (first, middle, last).

The user changes the first name and submits the form.
The 'success' message displays for 3 seconds and then fades. (in the background: display: none is set).
The use changes the middle name and submits the form.
The success message changes but the display:none remains, so the updated success message does not display. Here's my component code:

<div x-data="{show: true}"
     x-show="show"
     x-init="setTimeout(() => show = false, 3000)"
     class="bg-green-200 text-black mr-4 px-2" >
    {{ $success }}
</div>

and here's how it looks on the inspector on the first submit:

<div x-data="{show: true}" x-show="show" x-init="setTimeout(() => show = false, 3000)" class="bg-green-200 text-black mr-4 px-2" style="display: none;">
    Your personal information has been updated!  (1614715776)
</div>

and here's how it looks on the second submit:

<div x-data="{show: true}" x-show="show" x-init="setTimeout(() => show = false, 3000)" class="bg-green-200 text-black mr-4 px-2" style="display: none;">
    Your personal information has been updated!  (1614715825)
</div>

The parenthetical number is a timestamp I'm using to test that the new message is being delivered. Any advice on how to fix this is appreciated! Best - Rick

2 likes

Snapey

5 years ago

Level 122

@rretzko is your question related to Livewire? Better with a new question.

Please or to participate in this conversation.