F
Filament•15mo ago
Josh777

ViewColumn does not open modal with Modal Blade component

As in the docs, I have a ViewColumn: 
use Filament\Tables\Columns\ViewColumn;
 
ViewColumn::make('status')->view('custom-view')
use Filament\Tables\Columns\ViewColumn;
 
ViewColumn::make('status')->view('custom-view')
Within that View I have: 
<x-filament::modal>
    <x-slot name="trigger">
        <x-filament::button>
            Open modal
        </x-filament::button>
    </x-slot>
 
    {{-- Modal content --}}
</x-filament::modal>
<x-filament::modal>
    <x-slot name="trigger">
        <x-filament::button>
            Open modal
        </x-filament::button>
    </x-slot>
 
    {{-- Modal content --}}
</x-filament::modal>
This is enough to render a modal anywhere within a form using ViewField. However, when trying to do this in a ViewColumn, I'm getting the following error: Alpine Expression Error: isOpen is not defined ___ I would usually run this in an action, but I am unable to run any custom js within the action. Anything within script tags in a custom view do not execute. E.g. 
Tables\Actions\Action::make('myAction')
->requiresConfirmation()
->form([
    ViewField::make('name')
        ->view('test'),
])
Tables\Actions\Action::make('myAction')
->requiresConfirmation()
->form([
    ViewField::make('name')
        ->view('test'),
])
// test.blade.php
<script>
console.log('here') // this is ignored

function test() { 
    console.log('hello world') // never gets called
}
</script>

<button onclick="test">Click!</button> // renders fine
// test.blade.php
<script>
console.log('here') // this is ignored

function test() { 
    console.log('hello world') // never gets called
}
</script>

<button onclick="test">Click!</button> // renders fine
Does anyone know why this is the case on either issue and how I can fix? (Screenshot is of first issue, referencing ViewColumn modal)
No description
7 Replies
toeknee
toeknee•15mo ago
I suspect it's because it's not loading as a livewire view so it has not been processed the isOpen function into the runtime. You will likely need function isOpen() { } onto the parent element. But you can just use Filament Actions and pass in your custom view to render your data instead?
Josh777
Josh777OP•15mo ago
Hi @toeknee, can you give me a bit more detail on your first suggestion? The second suggestion doesn't work because of what I mentioned in the second half of my question, js does not ever execute in a filament modal
toeknee
toeknee•15mo ago
What are you trying to render in your popup
Josh777
Josh777OP•15mo ago
Rendering this would be a start 
<script>
console.log('here') // this is ignored

function test() { 
    console.log('hello world') // never gets called
}
</script>

<button onclick="test">Click!</button>
<script>
console.log('here') // this is ignored

function test() { 
    console.log('hello world') // never gets called
}
</script>

<button onclick="test">Click!</button>
toeknee
toeknee•15mo ago
That's a start but not what you want, what you are trying to rendering is what is important here. You could use a form, or a table possibly and so no custom view needed
Josh777
Josh777OP•15mo ago
toeknee
toeknee•15mo ago
Actual javascript needs adding to the application boot sequence so add it as per the docs as functions, then you can call those functions in the view if you need js

Did you find this page helpful?