Mostafa Amine Posts - Answer Overflow

•Created by Mostafa Amine on 1/16/2025 in #❓┊help

How to Control Filament Modal with JavaScript and Execute Custom Logic?

Hello, Filament Community! I am working on a Filament project and need some guidance on controlling a Filament modal via JavaScript. Specifically, I want to listen to modal-related events (like when it opens or closes) and execute custom logic inside a script. Here’s the code I’m currently using:

<x-filament-panels::page>
    <x-filament::modal id="edit-user">
        <x-slot name="trigger">
            <x-filament::button>
                Open modal
            </x-filament::button>
        </x-slot>
     
        <video id="preview"></video>
    </x-filament::modal>
</x-filament-panels::page>

<script>
    // Here I want to listen to the modal event and execute some logic
</script>

<x-filament-panels::page>
    <x-filament::modal id="edit-user">
        <x-slot name="trigger">
            <x-filament::button>
                Open modal
            </x-filament::button>
        </x-slot>
     
        <video id="preview"></video>
    </x-filament::modal>
</x-filament-panels::page>

<script>
    // Here I want to listen to the modal event and execute some logic
</script>

I’ve already gone through the documentation, but unfortunately, none of the approaches mentioned worked for me. My main goals are: - Detect when the modal is opened or closed. - Execute JavaScript logic (e.g., interact with the <video> element inside the modal). Any examples or pointers would be greatly appreciated. Thank you in advance!

5 replies

FFilament

•Created by Mostafa Amine on 1/15/2025 in #❓┊help

How to Control Filament Modal with JavaScript and Execute Custom Logic?

Hello, Filament Community! I am working on a Filament project and need some guidance on controlling a Filament modal via JavaScript. Specifically, I want to listen to modal-related events (like when it opens or closes) and execute custom logic inside a script. Here’s the code I’m currently using:

<x-filament-panels::page>
    <x-filament::modal id="edit-user">
        <x-slot name="trigger">
            <x-filament::button>
                Open modal
            </x-filament::button>
        </x-slot>
     
        <video id="preview"></video>
    </x-filament::modal>
</x-filament-panels::page>

<script>
    // Here I want to listen to the modal event and execute some logic
</script>

<x-filament-panels::page>
    <x-filament::modal id="edit-user">
        <x-slot name="trigger">
            <x-filament::button>
                Open modal
            </x-filament::button>
        </x-slot>
     
        <video id="preview"></video>
    </x-filament::modal>
</x-filament-panels::page>

<script>
    // Here I want to listen to the modal event and execute some logic
</script>

I’ve already gone through the documentation, but unfortunately, none of the approaches mentioned worked for me. My main goals are: - Detect when the modal is opened or closed. - Execute JavaScript logic (e.g., interact with the <video> element inside the modal). Any examples or pointers would be greatly appreciated. Thank you in advance!

2 replies

FFilament

•Created by Mostafa Amine on 1/7/2025 in #❓┊help

State of a modal

Hey builders, on my filament resource i have a custom modal button, and i want to know the state of the modal when it's first open from javascript to excecute some code. Thank you!

3 replies

FFilament

•Created by Mostafa Amine on 10/3/2024 in #❓┊help

How can i upload files to a markdown editor?

Hey guys, Could you help me upload files using the markdown editor component? I've attached a video. Thank you.

2 replies

FFilament

•Created by Mostafa Amine on 9/30/2024 in #❓┊help

Sidebar opens automatically on dashboard load

4 replies

FFilament

•Created by Mostafa Amine on 7/9/2024 in #❓┊help

Can Filament help me achieve this functionality?

10 replies

Gaming

Programming