how to use Action button to trigger js

How can I use Action to run js?

Solution:

https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/views/components/wizard.blade.php Take a look. The click actions are in the span, and the actions inside the span render the button....

GitHub

filament/packages/forms/resources/views/components/wizard.blade.php...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

Jump to solution

6 Replies

LeandroFerreira•11mo ago

->action(function(){
$this->js('');
})

->action(function(){
$this->js('');
})

or $livewire->js() https://livewire.laravel.com/docs/actions#evaluating-one-off-javascript-expressions

Laravel

Actions | Laravel

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

wyChoongOP•11mo ago

while this works but it send request to server I'm actually looking at ->livewireClickHandlerEnabled(false) like in repeater reorder action but couldnt get how it works or wizard actions maybe I understanding ->livewireClickHandlerEnabled(false) wrong

LeandroFerreira•11mo ago

share some code you are trying

wyChoongOP•11mo ago

i want to render an action like this in html

// in blade
{{ ($this->rejectAction)('maybe something js here') }}

// in blade
{{ ($this->rejectAction)('maybe something js here') }}

<button class="..." x-on:click="$wire.property = false" >Reject</button>

<button class="..." x-on:click="$wire.property = false" >Reject</button>

i dont need the action button to trigger a server request at the momemnt of click as I have a submit button at the bottom of the page reason why using the Action is to have unify design the closest i get now is

Action::make('packed')
            ->livewireClickHandlerEnabled(false)
            ->extraAttributes([
                'x-on:click' => new HtmlString("console.log('asd')"),
            ]);

// in blade
{{ $this->packedAction }}

Action::make('packed')
            ->livewireClickHandlerEnabled(false)
            ->extraAttributes([
                'x-on:click' => new HtmlString("console.log('asd')"),
            ]);

// in blade
{{ $this->packedAction }}

while this works now but I'm looking a better/recommended way

Solution

LeandroFerreira•11mo ago

GitHub

filament/packages/forms/resources/views/components/wizard.blade.php...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

wyChoongOP•11mo ago

ah thanks! thats what im looking for

Gaming

Programming

how to use Action button to trigger js