Filament•15mo ago

open modal with js

I have created custom page which has a modal , I want to open the modal using js after an event , but I failed , how can I do that using js please , I searched but I didn't get it

21 Replies

OumaimaOP•15mo ago

heeelp! @Dennis Koch

awcodes•15mo ago

Please don't tag people.

awcodes•15mo ago

maybe this will work. https://livewire.laravel.com/docs/events#dispatching-livewire-events-from-script-tags

Laravel

Events | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

OumaimaOP•15mo ago

I apologize , I didn't know that I shouldn't tag anyone , and thank you for your effort

Dennis Koch•15mo ago

Then please read the server #✅┊rules 😉

LeandroFerreira•15mo ago

<x-filament-panels::page>
    <x-filament::modal id="myModal">
        <div>
            Content...
        </div>
    </x-filament::modal>

    @push('scripts')
        <script>
            document.addEventListener('livewire:initialized', () => {

                //dispatch the modal...
                @this.dispatch('open-modal', {
                    id: 'myModal'
                });
            });
        </script>
    @endpush
</x-filament-panels::page>

<x-filament-panels::page>
    <x-filament::modal id="myModal">
        <div>
            Content...
        </div>
    </x-filament::modal>

    @push('scripts')
        <script>
            document.addEventListener('livewire:initialized', () => {

                //dispatch the modal...
                @this.dispatch('open-modal', {
                    id: 'myModal'
                });
            });
        </script>
    @endpush
</x-filament-panels::page>

OumaimaOP•15mo ago

it didn't work for me , I don't know why

LeandroFerreira•15mo ago

what is the issue?

OumaimaOP•15mo ago

the modal do not open

LeandroFerreira•15mo ago

does it work?

<x-filament::modal id="myModal">
    <div>
        Content...
    </div>
</x-filament::modal>
<x-filament::button @click="$dispatch('open-modal', {id: 'myModal'})">Open modal</x-filament::button>

<x-filament::modal id="myModal">
    <div>
        Content...
    </div>
</x-filament::modal>
<x-filament::button @click="$dispatch('open-modal', {id: 'myModal'})">Open modal</x-filament::button>

OumaimaOP•15mo ago

I don"t want to open it using a button , I want it to open whan I scann a qr code

LeandroFerreira•15mo ago

yep, I know, but this works?

OumaimaOP•15mo ago

you mean with button

LeandroFerreira•15mo ago

yes

OumaimaOP•15mo ago

no i tried it now , it does not work

LeandroFerreira•15mo ago

console errors?

OumaimaOP•15mo ago

I'm sorry for losing your time , I just want to figure out what's the problem and how to resolve it nothing

LeandroFerreira•15mo ago

if you are running this

<x-filament-panels::page>

    <x-filament::modal id="myModal">
        <div>
            Content...
        </div>
    </x-filament::modal>
    <x-filament::button @click="$dispatch('open-modal', {id: 'myModal'})">Open modal</x-filament::button>

</x-filament-panels::page>

<x-filament-panels::page>

    <x-filament::modal id="myModal">
        <div>
            Content...
        </div>
    </x-filament::modal>
    <x-filament::button @click="$dispatch('open-modal', {id: 'myModal'})">Open modal</x-filament::button>

</x-filament-panels::page>

It was supposed to work. It is a simple modal test

OumaimaOP•15mo ago

I cleared the cache and all , this one works now but this no

LeandroFerreira•15mo ago

without @push('scripts') ? What is the output? What about this?

<script>
    document.addEventListener('livewire:initialized', () => {
        console.log('initialized!');
    });
</script>

<script>
    document.addEventListener('livewire:initialized', () => {
        console.log('initialized!');
    });
</script>

You need to check the code step by step to find the issue..

OumaimaOP•15mo ago

I removed

document.addEventListener('livewire:initialized', () => {

                });

and it worked I did just this line

 <script>
                    @this.dispatch('open-modal', {
                        id: 'myModal'
                    });</script>

thank you so much sir

Gaming

Programming

open modal with js