Select On Change

acroninja · 2023-07-08T02:49:44.218Z

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)

L

Lara Zeus•7/8/23, 2:52 AM

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.

A

acroninjaOP•7/8/23, 3:04 AM

Hey, Thanks @larazeus hopefully I can figure it out from that

A

acroninjaOP•7/8/23, 3:47 AM

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')

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

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

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

A

acroninjaOP•7/8/23, 3:48 AM

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

L

Lara Zeus•7/8/23, 4:07 AM

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

A

acroninjaOP•7/8/23, 2:10 PM

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()
                                        ]

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

A

acroninjaOP•7/8/23, 2:12 PM

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

A

acroninjaOP•7/8/23, 2:31 PM

Don't worry, think i've cracked it, just need the updatedAttribute() fn to catch the event

A

acroninjaOP•7/8/23, 3:44 PM

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
        }

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
        }

A

acroninjaOP•7/8/23, 3:45 PM

 Cannot read properties of null (reading '__livewire')

Cannot read properties of null (reading '__livewire')

 Cannot read properties of null (reading '__livewire')

Cannot read properties of null (reading '__livewire')

A

acroninjaOP•7/8/23, 3:48 PM

So in summary !!
Form contains
Select::make('emailTemplateId')
->options($emailTemplates)
->reactive(),

But theres a js error before we get to: public function updatedEmailTemplateId($value)

N

nitinkaware•9/28/23, 8:50 AM

I was also experiencing the same error:

Cannot read properties of null (reading '__livewire')

Cannot read properties of null (reading '__livewire')

Cannot read properties of null (reading '__livewire')

Cannot read properties of null (reading '__livewire'). The issue was caused by passing a closure to the

options

options

options

options method, along with

reactive

reactive

reactive

reactive method. I resolved the issue by removing the code from the closure and using a direct array instead.

Similar Threads

Similar Threads

Similar Threads