Liveware.emit not working in global javascript

Question

I have a laravel emit in a liveware blade file as follows:

<script>
    document.addEventListener('livewire:load', function () {
        setTimeout(()=>{
            Livewire.emit('nextSlot');
        }, 4000);
    });
</script>

This does not work, it does not emit the nextSlot function in the respected php file.

Note, this hwoever does work as expected:

<button wire:click="nextSlot">
    Next Slot
</button>

Any reason why my emit inside the <script> tags don't work? And what can I do to emit an event after a setTimeout?

Answer 1

You need to add an event listenter on your Component for your client event:

protected $listeners ['nextSlot'];

The above will listen for a nextSlot event being raised and call a method in you Component called nextSlot. If your event name and method do not match, you would need to specify the name of the method to be called.

protected $listeners = ['nextSlot' => 'methodName'];

Also note that your nextSlot event will be fired just once after 4 seconds. Not sure if that is what you want or if you want the event fired every 4 seconds. If you want the latter, replace setTimeout() with setInterval().

document.addEventListener('livewire:load', function () {
    setInterval(() => Livewire.emit('nextSlot'), 4000);
})