Filament•11mo ago

Custom JS script inside modalContent

Hi there, I am trying to create a modal, opening which will have some custom JS that shall run to take data from user. Here's the code that will trigger the modal:

Components\TextInput::make('barcode')
                    ->columnSpan(2)
                    ->label("Barcode (UAN, EAN, ISBN, etc)")
                    ->suffixActions([
                        Components\Actions\Action::make('barcodeScanner')
                            ->icon('heroicon-m-camera')
                            ->modalContent(fn (Components\Actions\Action $action): View =>                                   view('control.modals.barcode_scanner',
                                ['action' => $action],
                               ))
                    ]),

Components\TextInput::make('barcode')
                    ->columnSpan(2)
                    ->label("Barcode (UAN, EAN, ISBN, etc)")
                    ->suffixActions([
                        Components\Actions\Action::make('barcodeScanner')
                            ->icon('heroicon-m-camera')
                            ->modalContent(fn (Components\Actions\Action $action): View =>                                   view('control.modals.barcode_scanner',
                                ['action' => $action],
                               ))
                    ]),

The view "control.modals.barcode_scanner" has the following code:

<div>
    <div id="scanner"></div>

    <script src="{{ asset('js/quagga.min.js') }}"></script>
    <script>
        // Custom JS Script
    </script>
 
</div>

<div>
    <div id="scanner"></div>

    <script src="{{ asset('js/quagga.min.js') }}"></script>
    <script>
        // Custom JS Script
    </script>
 
</div>

But I do see the script element in the DOM but the js inside does not run. Someone kindly help me with this. Thanks and regards!

1 Reply

Tieme•11mo ago

what is between the script tags?

  <script>
      // Custom JS Script
  </script>

  <script>
      // Custom JS Script
  </script>

Gaming

Programming

Custom JS script inside modalContent