Seeking Help with Resetting Div Timer on Repeated 'open' Events (alpine JS & livewire)

Hi! I wonder how the timer for the div can be reset every time open becomes true. So, when 'showUpdate' becomes true, a div appears with the message "Updated successfully," and it fades away after 5 seconds. That part works! However, when 'showUpdate' becomes true again, the div pops up, but the fade-away effect never kicks in. I suspect the issue might be related to x-init triggering only the first time the div appears. On later appearances, it seems like the setTimeout isn't being called. Any insights on what the problem might be? I'd really appreciate any help or suggestions you can provide. Thanks!

        <div x-data="{ open: @entangle('showUpdate'), timer : null}">
            <div x-show="open"
                 x-transition:leave="transition ease-in duration-1000"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-10"
                 x-init="timer = setTimeout(() => {open = false; $wire.set('showUpdate', false); clearTimeout(timer); }, 5000)">
                <div class="styling....">
                    <span class="styling..">Updated succeed</span>
                </div>
            </div>
        </div>

jbloomstrom

2 years ago

Best Answer

Level 50

I'm not as familiar with Alpine, but have you tried using x-if instead of x-show so it removes the element from the DOM when open is falsy?

        <div x-data="{ open: @entangle('showUpdate'), timer : null}">
          <template x-if="open">
            <div
                 x-transition:leave="transition ease-in duration-1000"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-10"
                 x-init="timer = setTimeout(() => {open = false; $wire.set('showUpdate', false); clearTimeout(timer); }, 5000)">
                <div class="styling....">
                    <span class="styling..">Updated succeed</span>
                </div>
            </div>
          </template>
        </div>

Edit. Apparently x-if can only be used on a template tag.

1 like

anttton123

2 years ago

Level 1

Hello! @jbloomstrom, thanks for you answer! It works now as expected, there is one small problem and that is that the fade animation is gone, maybe it has something to do when template x-if:="open" sets to false, the transition is not able to kick in before it dissapers. Thanks anyway!!

Please or to participate in this conversation.