How to execute javascript within a modal

I have a modal that is initated with an action:

TextColumn::make('order_id')
  ->action(
    Action::make('scan-item')
      ->label('Scan Items')
      ->modalContent(view('prototypes.scanner'))
      ->action(function (Order $record): void {

      })
      ->modalWidth('Screen')
      ->slideOver()
    ),

TextColumn::make('order_id')
  ->action(
    Action::make('scan-item')
      ->label('Scan Items')
      ->modalContent(view('prototypes.scanner'))
      ->action(function (Order $record): void {

      })
      ->modalWidth('Screen')
      ->slideOver()
    ),

This opens the modal slideover correctly, and I see the correct content. However, I need to execute some javascript after the modal loads. I've tried updating my blade to do this:

<x-app-layout>
    foo bar
    @push('modals')
        <script>
            console.log('Script is running');
        </script>
    @endpush
</x-app-layout>

<x-app-layout>
    foo bar
    @push('modals')
        <script>
            console.log('Script is running');
        </script>
    @endpush
</x-app-layout>

I do have the @stack in my app.blade.php file:

@livewireScripts        @vite('resources/js/app.js')
@stack('modals')

@livewireScripts        @vite('resources/js/app.js')
@stack('modals')

But that console.log doesn't execute. So, I have two questions: 1. How do I execute JS in a modal 2. There will be several table rows with the same action, that execute the same JS - is there a better way to do this?

7 Replies

lzx1996•6mo ago

have you tried to use wire:init in your modal component https://livewire.laravel.com/docs/wire-init

Laravel

wire:init | Laravel

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

ChrisROP•6mo ago

I have not, I'll try it first thing - thanks!

ChrisROP•6mo ago

It seems as if wire:init is intended for calling actions - I don't see how that would allow me to execute JS in a modal - am I missing your meaning? That did lead me to https://livewire.laravel.com/docs/javascript but when I do something simple like:

@script
<script>
    console.log('foo')
</script>
@endscript

@script
<script>
    console.log('foo')
</script>
@endscript

It just renders @script @endscript and never logs.

Laravel

JavaScript | Laravel

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

lzx1996•6mo ago

What about using alpine x-init https://alpinejs.dev/directives/init

init — Alpine.js

LeandroFerreira•6mo ago

try x-init https://discord.com/channels/883083792112300104/1257957993753083914/1258053353167126549

ChrisROP•6mo ago

Thanks, I'll take a look at that as well. Right now I at least have my JS firing with a combo of: component blade file: <div class="wrapper flex flex-col" wire:init="initScanner"> component class:

public function initScanner()
    {
        $this->dispatch('order-scanner-modal-opened');
    }

public function initScanner()
    {
        $this->dispatch('order-scanner-modal-opened');
    }

if (window.Livewire) {
    initBarcodeCapture();
    Livewire.on('order-scanner-modal-opened', () => {
        console.log('Success...finally')
    });
}

if (window.Livewire) {
    initBarcodeCapture();
    Livewire.on('order-scanner-modal-opened', () => {
        console.log('Success...finally')
    });
}

I have no idea if this is the best way to do this yet. I'm still trying to figure out the relationship between Filament, Livewire, and Alpine and knowing when to use what where 🙂

LeandroFerreira•6mo ago

You can also dispatch it using mountUsing method I think

Action::make('scan-item')
...
->mountUsing(function () {
    $this->dispatch('order-scanner-modal-opened');
})

Action::make('scan-item')
...
->mountUsing(function () {
    $this->dispatch('order-scanner-modal-opened');
})

Gaming

Programming

How to execute javascript within a modal