Filament•2mo ago

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() {}
}

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

<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.

3 Replies

LeandroFerreira•2mo ago

run it after the page loads or when a button is clicked ?

mithyyOP•2mo ago

it should work after clicking the button

Dennis Koch•2mo ago

Either use plain JS or Alpine. onclick="doThings()

Gaming

Programming

Run JavaScript code after the page loads