SmurfWorks Comments - Answer Overflow

SmurfWorks

•Created by SmurfWorks on 10/15/2023 in #❓┊help

Using scripts in action modal content

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.

8 replies

FFilament

•Created by SmurfWorks on 10/15/2023 in #❓┊help

Using scripts in action 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.

8 replies

FFilament

•Created by SmurfWorks on 10/15/2023 in #❓┊help

Using scripts in action modal content

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.

8 replies

FFilament

•Created by SmurfWorks on 10/15/2023 in #❓┊help

Using scripts in action modal content

@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?

8 replies

FFilament

•Created by SmurfWorks on 10/15/2023 in #❓┊help

Using scripts in action modal content

8 replies

Gaming

Programming