FilamentF
Filament•14mo ago
mithyy

Run JavaScript code after the page loads

Hi,
I'm using the latest version of Filament. In my project, I need to run a JavaScript code (variable) in Blade when a button is clicked. I will use it as simply as in the codes below. How can I make it work?

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;
use Iyzipay\Options;

class SubscribePage extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';
    protected static ?string $navigationLabel = 'Subscribe';
    protected static string $view = 'filament.pages.subscribe-page';

    public $checkoutForm = null;

    public function startCheckoutForm()
    {
        $this->checkoutForm = "<script>alert('here')</script>";
    }

    public function subscribe() {}
}


<x-filament::page>
    <x-filament::fieldset>
        <x-filament::button icon="heroicon-m-credit-card" icon-position="after" class="mt-3"
            wire:click="startCheckoutForm">
            Subscribe
        </x-filament::button>

        <div class="mt-4 p-4 bg-green-100 border border-green-200 text-green-700">
            {!! $checkoutForm !!}
        </div>
    </x-filament::fieldset>
</x-filament::page>


After clicking the button, the JavaScript code appears within the HTML code, but it doesn’t run because it’s loaded afterward.
Was this page helpful?