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.dev
gemini.devOP3w ago
Fixed it. I had to use $this->dispatch('open-modal', id: 'global-modal'); and not $this->dispatch('open-modal', ['id' => 'global-modal']);
Want results from more Discord servers?
Add your server