Modal blade component not opening on event dispatch.

Hello, I have the blade modal component as this

<x-filament::modal id="biodata" slide-over sticky-header sticky-footer width='5xl' :close-button="true" :close-by-clicking-away="true" icon="heroicon-o-information-circle">
    <x-slot name="heading">
        Biodata
    </x-slot>
    </x-slot>
    <x-slot name="description">
        Thank you for choosing us.
    </x-slot>
    <livewire:biodata /> 
    <x-slot name="footer">
        Footer
    </x-slot>
</x-filament::modal>

<x-filament::modal id="biodata" slide-over sticky-header sticky-footer width='5xl' :close-button="true" :close-by-clicking-away="true" icon="heroicon-o-information-circle">
    <x-slot name="heading">
        Biodata
    </x-slot>
    </x-slot>
    <x-slot name="description">
        Thank you for choosing us.
    </x-slot>
    <livewire:biodata /> 
    <x-slot name="footer">
        Footer
    </x-slot>
</x-filament::modal>

inside a custom blade file placed inside the views/filament/mypanel. I have a method

dispatchOnNext(string $name, ...$args)

dispatchOnNext(string $name, ...$args)

whose implementation is just dispatching the event name and the params passed

Livewire.dispatch(name, params);

Livewire.dispatch(name, params);

.I'm trying to open the modal above inside this method like this

dispatchOnNext('open-modal',{id:'biodata'})

dispatchOnNext('open-modal',{id:'biodata'})

. However the modal does not show up neither do i get any console errors. Testing with the

<x-slot name="trigger">..

<x-slot name="trigger">..

in the blade component works just fine. Any help?Thank you.

5 Replies

lodekiOP•14mo ago

I've also tried to dispatch the modal from elsewhere in the app [ a page ] with this

<button @click="$dispatch('open-modal', { id: 'biodata' })">TEST DISPATCH</button>

<button @click="$dispatch('open-modal', { id: 'biodata' })">TEST DISPATCH</button>

but still nothing works. Any idea here?

Quin.•14mo ago

what error do you get in the console when you click it?

lodekiOP•14mo ago

No error appears.

Quin.•14mo ago

Also not in the webconsole?

lodekiOP•14mo ago

Yes sure no error. Currently i've added the modal on to one of my livewire blade file and given it the id = "biodata" . Then i've extended the dashboard to this

<?php

namespace App\Filament\Manager\Pages;
use DOMDocument;
use Filament\Pages\Dashboard as BasePage;
class ManagerDashboard extends BasePage
{
    public function mount()
    {
        $doc = new DOMDocument();
        dump($doc->getElementById('biodata'));   //this gives null .
        $this->dispatch('open-modal', id: 'biodata');
    } 
}

<?php

namespace App\Filament\Manager\Pages;
use DOMDocument;
use Filament\Pages\Dashboard as BasePage;
class ManagerDashboard extends BasePage
{
    public function mount()
    {
        $doc = new DOMDocument();
        dump($doc->getElementById('biodata'));   //this gives null .
        $this->dispatch('open-modal', id: 'biodata');
    } 
}

. I've tried to dispatch it from the mount method of the dashboard but still nothing . Any help . I have no idea .

Gaming

Programming

Modal blade component not opening on event dispatch.