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

@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

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?

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

@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

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?

How to execute javascript within a modal

Similar Threads

How to execute javascript within a modal

Similar Threads

Similar Threads

Similar Threads