Filament•2y ago

Select On Change

I have a Select on a custom admin page form and would like to update the form fields -> or even trigger a url action when selecting from the dropdown. ie load a new record into the form. Select::make('id')->options($emailTemplates)

6 Replies

Lara Zeus•2y ago

maybe like this https://filamentphp.com/docs/2.x/forms/advanced#dependant-fields--components

Filament

Advanced - Form Builder - Filament

The elegant TALL stack form builder for Laravel artisans.

acroninjaOP•2y ago

Hey, Thanks @larazeus hopefully I can figure it out from that Hmm, when i add ->reactive() to the select, the form is reloaded but empty and get this js error:

Uncaught TypeError: Cannot read properties of null (reading '__livewire')

I need to have some fn to load the new model but can't see what is being triggered on change

Lara Zeus•2y ago

if you can provide a code so i can understand more what you are doing

acroninjaOP•2y ago

I have a ViewRecord page https://github.com/visualbuilder/email-templates/blob/main/src/Resources/EmailTemplateResource/Pages/PreviewEmailTemplate.php Which loads a form showing the records values in a form. I'd like to be able to update the page content dynamically to a different record when it's selected in a dropdown. The form is in the EmailTemplateResource :-

       $emailTemplates = EmailTemplate::all()->pluck('name', 'id');
        
        if(request()->routeIs(['filament.resources.email-templates.view', 'filament.message'])) {
            //View Email Template Form
            return $form->schema(
                [
                    Card::make()
                        ->schema(
                            [
                                Grid::make(['default' => 1, 'sm' => 1, 'md' => 2])
                                    ->schema(
                                        [
                                            Select::make('id')
                                                  ->options($emailTemplates)
                                                  ->searchable()
                                                  ->reactive(),
                                            
                                            TextInput::make('from')
                                                     ->disabled()
                                        ]

       $emailTemplates = EmailTemplate::all()->pluck('name', 'id');
        
        if(request()->routeIs(['filament.resources.email-templates.view', 'filament.message'])) {
            //View Email Template Form
            return $form->schema(
                [
                    Card::make()
                        ->schema(
                            [
                                Grid::make(['default' => 1, 'sm' => 1, 'md' => 2])
                                    ->schema(
                                        [
                                            Select::make('id')
                                                  ->options($emailTemplates)
                                                  ->searchable()
                                                  ->reactive(),
                                            
                                            TextInput::make('from')
                                                     ->disabled()
                                        ]

GitHub

email-templates/src/Resources/EmailTemplateResource/Pages/PreviewEm...

Email Template Editor for Filament. Contribute to visualbuilder/email-templates development by creating an account on GitHub.

acroninjaOP•2y ago

Not sure if this needs to be in a separate form component. Also the page url would need to be updated to reflect the change. I need to hook into the event message to load the new record, update $data and push an new url onto the history Don't worry, think i've cracked it, just need the updatedAttribute() fn to catch the event Grrr. No. Still get an error in the console on change event in this fn:-

function addDollarSignWire() {
        isV3() ? window.Alpine.magic("wire", (function(el) {
            var wireEl = el.closest("[wire\\:id]");
            return wireEl || console.warn('Alpine: Cannot reference "$wire" outside a Livewire component.'),
            wireEl.__livewire.$wire
        }

function addDollarSignWire() {
        isV3() ? window.Alpine.magic("wire", (function(el) {
            var wireEl = el.closest("[wire\\:id]");
            return wireEl || console.warn('Alpine: Cannot reference "$wire" outside a Livewire component.'),
            wireEl.__livewire.$wire
        }

Cannot read properties of null (reading '__livewire') So in summary !! Form contains Select::make('emailTemplateId') ->options($emailTemplates) ->reactive(), But theres a js error before we get to: public function updatedEmailTemplateId($value)

nitinkaware•15mo ago

I was also experiencing the same error: Cannot read properties of null (reading '__livewire'). The issue was caused by passing a closure to the options method, along with reactive method. I resolved the issue by removing the code from the closure and using a direct array instead.

Gaming

Programming

Select On Change