Filament•14mo ago

Using scripts in action modal content

Hey, so it seems like I can't get a script tag to fire from within an action modal's custom view. I imagine this is to do with the livewire:init event having already fired, but I thought I would check here and see if I'm missing something. I've just attached a screenshot of my modal trigger, which is all working fine. The custom livewire component in the view is running fine, but again, with no scripts firing.

4 Replies

SmurfWorksOP•14mo ago

Just in case it matters, I've tried as per the livewire docs too.

cheesegrits•14mo ago

Please read #✅┊rules 4. Have you tried using Alpine, with x-data / x-init to run your code?

SmurfWorksOP•14mo ago

@Hugh Messenger Sorry about that, I wasn't sure given I have multiple files it the file tabs context was more useful than code snippets. In my modal blade file (evaluation-logic-explorer.blade.php) I've tried the following to no success:

<div x-init="myFunction">
    <h1>My custom modal content</h1>
</div>

<script>
var myFunction = function () {
    alert('test');
};
</script>

<div x-init="myFunction">
    <h1>My custom modal content</h1>
</div>

<script>
var myFunction = function () {
    alert('test');
};
</script>

The above hasn't worked for me, only saying that Reference error: myFunction is not defined Which I understand means it's trying to execute that, but it's not the implemented script. I need to run 1000+ lines of d3.js logic and I figure there must be a way to execute my script logic rather than put that all in an attribute? Sorry I also apologise if this more a question for how to use Livewire Components or Alpine, I originally thought this was a subtley of using Filament Actions and having custom modal content.

<div>
    <h1>My custom modal content!</h1>
    <button wire:click.prevent="$dispatch('execute-alert')">Execute alert</button>
</div>

<script>
@this.on('execute-alert', function () {
    alert('test');
});
</script>

<div>
    <h1>My custom modal content!</h1>
    <button wire:click.prevent="$dispatch('execute-alert')">Execute alert</button>
</div>

<script>
@this.on('execute-alert', function () {
    alert('test');
});
</script>

Even the above doesn't seem to bind the event listener within the modal content, with no script errors. I can see the script has converted @this.on to Livewire.find(...).on at runtime. If I add an alert to the script, nothing occurs which means I don't think the script tag is executed at all. I feel a bit silly but maybe it's the way I was interpreting the documentation. The script tags aren't fired or pushed into the stack if they're not in the initial request, and the contents of an action modal don't meet this criteria. I ended up creating a JS file that's appended to the template using a render hook in the panel provider. Then using $this->js() or wire-init/x-init I can interact with the object bound to the window.

cheesegrits•14mo ago

Sorry, got slammed with client work. I'd suggest lazy loading with x-load-js, and x-data/x-init to run the code. https://filamentphp.com/docs/3.x/support/assets/#lazy-loading-javascript

Assets - Core Concepts - Filament

Gaming

Programming

Using scripts in action modal content