How to open a filament modal using dispatch?

I have a page, that renders a table with a custom column: Main.php

ViewColumn::make('services')
->label('Deadlines')
->view('filament.tables.columns.custom-column')

ViewColumn::make('services')
->label('Deadlines')
->view('filament.tables.columns.custom-column')

Within the custom column blade file, I have the following code: CustomColumn.blade.php

@livewire('global-modal')

...

<td wire:click="$dispatch('openModal', { 
    id: {{ $record->id }}, 
    status: '{{ $status }}' 
})"

@livewire('global-modal')

...

<td wire:click="$dispatch('openModal', { 
    id: {{ $record->id }}, 
    status: '{{ $status }}' 
})"

Click the <td> should open the global-modal component. Here is how it is defined: GlobalModal.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class GlobalModal extends Component
{
    public $modalData = [];

    protected $listeners = ['openModal' => 'handleOpenModal'];

    public function handleOpenModal()
    {
        $this->dispatch('open-modal', ['id' => 'global-modal']);
    }

    public function render()
    {
        return view('livewire.modals.global-modal');
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class GlobalModal extends Component
{
    public $modalData = [];

    protected $listeners = ['openModal' => 'handleOpenModal'];

    public function handleOpenModal()
    {
        $this->dispatch('open-modal', ['id' => 'global-modal']);
    }

    public function render()
    {
        return view('livewire.modals.global-modal');
    }
}

global-modal.blade.php

<x-filament::modal id="global-modal" width="xl">
    <x-slot name="heading">
        <h2>Modal Content</h2>
    </x-slot>
    <div>
        <!-- Display the modal data -->
        <pre>{{ json_encode($modalData, JSON_PRETTY_PRINT) }}</pre>
    </div>
</x-filament::modal>

<x-filament::modal id="global-modal" width="xl">
    <x-slot name="heading">
        <h2>Modal Content</h2>
    </x-slot>
    <div>
        <!-- Display the modal data -->
        <pre>{{ json_encode($modalData, JSON_PRETTY_PRINT) }}</pre>
    </div>
</x-filament::modal>

But when I click the button, the dispatch does nothing. No error are shown either. I have confirmed the button works, by placing a dd("hello") in the handleOpenModal function. Could someone please assist where I am going wrong?

1 Reply

gemini.devOP•2mo ago

Fixed it. I had to use $this->dispatch('open-modal', id: 'global-modal'); and not $this->dispatch('open-modal', ['id' => 'global-modal']);

Gaming

Programming

How to open a filament modal using dispatch?