Filament•13mo ago

Listen for Event on Custom Page

I'm trying to listen for a dispatched event on a custom page and I must be doing something wrong. Can anyone help me out?

// Livewire
public function addToRepeater()
    {
        Log::debug('card-added'); // this point is reached
        $this->dispatch('card-added');
    }

// View
<x-filament::page x-on:card-added.window="handleCardAdded()">
// ... page code
</x-filament::page>
<script>
    document.addEventListener('livewire:initialized', () => {
    console.log('here');
       @this.on('card-added', (event) => {
           console.log('added');
       });
    });
function handleCardAdded()
{
    console.log('handleCardAdded');
}
</script>

// Livewire
public function addToRepeater()
    {
        Log::debug('card-added'); // this point is reached
        $this->dispatch('card-added');
    }

// View
<x-filament::page x-on:card-added.window="handleCardAdded()">
// ... page code
</x-filament::page>
<script>
    document.addEventListener('livewire:initialized', () => {
    console.log('here');
       @this.on('card-added', (event) => {
           console.log('added');
       });
    });
function handleCardAdded()
{
    console.log('handleCardAdded');
}
</script>

I've tried listening in both Alpine and in JS. Neither one is working. I must be missing something.

1 Reply

bwurtz999OP•13mo ago

console.log('here'); is showing successfully and there are no error messages in the console

Gaming

Programming

Listen for Event on Custom Page