Filament•6mo ago

Script Doesnt Load When Using Modals

I created a filament custom field. It needs an external script to work so i add it at the bottom of the component So far works, cool. But now im using the field in a modal. and there, it doesnt work. the script is not being loaded. so the question is, how to load the script when the field is inside a modal? i've tried to remove the async and defer, but the result is the same:

<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_KEY') }}&libraries=places" async defer></script>

<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_KEY') }}&libraries=places" async defer></script>

11 Replies

ericmpOP•6mo ago

now i tried to follow this - https://github.com/filamentphp/filament/discussions/12614#discussioncomment-9313600

@assets
    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_KEY') }}&libraries=places" async defer></script>
@endassets

@assets
    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_KEY') }}&libraries=places" async defer></script>
@endassets

but still getting the same error bump

Dennis Koch•6mo ago

the script is not being loaded.

Is it really not being loaded or just after your code is run?

ericmpOP•6mo ago

just checked it, is not being loaded i did it by using the js browser console, i get the same error if it was loaded i guess i would be able to execute functions that the script provides i also tried @push('scripts') but nah, same error

LeandroFerreira•6mo ago

You don’t need to execute this script every time a modal is loaded. Instead, add the script to the provider

use Filament\Support\Assets\Js;
use Filament\Support\Facades\FilamentAsset;

public function boot(): void
{
    FilamentAsset::register([
        Js::make('custom-script', 'https://maps.googleapis.com...'),
    ]);
}

use Filament\Support\Assets\Js;
use Filament\Support\Facades\FilamentAsset;

public function boot(): void
{
    FilamentAsset::register([
        Js::make('custom-script', 'https://maps.googleapis.com...'),
    ]);
}

You can run your code in the custom field using Alpine.js.

<div x-data="{}" x-init="
    console.log('initialized!')
">
</div>

<div x-data="{}" x-init="
    console.log('initialized!')
">
</div>

ericmpOP•6mo ago

im on v2 + only forms + tables separated components (no admin panels) is it fine? or the code u provide is for panels?

LeandroFerreira•6mo ago

use

Filament::registerScripts([
    'https://maps.googleapis.com...',
], true);

Filament::registerScripts([
    'https://maps.googleapis.com...',
], true);

https://filamentphp.com/docs/2.x/admin/appearance#including-frontend-assets custom field is the same I think

Appearance - Admin Panel - Filament

ericmpOP•6mo ago

i think that is for panels, since i get Undefined type 'Filament\Facades\Filament' (im not using admin panel)

LeandroFerreira•6mo ago

if you are not using panels, you should register the script in your layout https://filamentphp.com/docs/2.x/forms/installation#configuring-layout

Installation - Form Builder - Filament

ericmpOP•6mo ago

yeah but this script is only called in a modal in a specific table, everywhere else where i call the layout ill be downloading the script but i dont need it but if this is the workaround i think ill have to do that

LeandroFerreira•6mo ago

you can use @push('scripts') to register the script, but outside the modal https://laravel-livewire.com/docs/2.x/inline-scripts#introduction

Livewire

Inline Scripts | Livewire

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

ericmpOP•6mo ago

the thing is that the cdn is inside a custom field xd well dont worry, at the moment ill add the cdn call on the views that i use the field appreciate ur time

Gaming

Programming

Script Doesnt Load When Using Modals