Sortable() and Searchable() not behaving as expected

T

tuto1902•1/28/24, 10:48 PM

Can you also share the layout template? My gut tells me you might be missing the @filamentScripts directive. Also, when using a full page component like this, livewire looks for

resources/views/components/layouts/app.blade.php

resources/views/components/layouts/app.blade.php

resources/views/components/layouts/app.blade.php

resources/views/components/layouts/app.blade.php as the layout file, unless you changed the global layout inside

config/livewire.php

config/livewire.php

config/livewire.php

config/livewire.php

Route::get('/directory', ListMembers::class)->name('directory');

Route::get('/directory', ListMembers::class)->name('directory');

Route::get('/directory', ListMembers::class)->name('directory');

Route::get('/directory', ListMembers::class)->name('directory');

This means that you shouldn't have to inherit the global layout in your component's view.
(

<x-app-layout>

<x-app-layout>

<x-app-layout>

<x-app-layout> is not needed)

T

tuto1902•1/28/24, 11:15 PM

Also, to be safe, try using

composer update

composer update

composer update

composer update to bump filament/filament to v3.2

E

ErinOP•1/28/24, 11:17 PM

Thanks Tuto, I haven't changed the global layout inside config/livewire.php (I don't have that file). And it is confusing to me which app.blade.php layout is being used; there is more than one of them and one does have the @filamentScripts and the other doesn't. I'll play around with that.

T

tuto1902•1/28/24, 11:22 PM

I think by using <x-app-layout> you are using the one that doesn't.

T

tuto1902•1/28/24, 11:22 PM

Try using this approach to use the correct layout and still have access to extra slots, like header
https://livewire.laravel.com/docs/components#setting-additional-layout-file-slots

Laravel

Components | Laravel

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

T

tuto1902•1/28/24, 11:25 PM

Let me know how it goes

E

ErinOP•1/29/24, 12:35 AM

Thanks Tuto; I haven't attempted to update the layout file per the article you sent yet; however, I removed all the code except

<div class="p-6 text-gray-900 dark:text-gray-100">
  {{ $this->table }}
</div>

<div class="p-6 text-gray-900 dark:text-gray-100">
  {{ $this->table }}
</div>

<div class="p-6 text-gray-900 dark:text-gray-100">
  {{ $this->table }}
</div>

<div class="p-6 text-gray-900 dark:text-gray-100">
  {{ $this->table }}
</div>

in the

list-members.blade.php

list-members.blade.php

list-members.blade.php

list-members.blade.php

file. When I view the source in the browser, the correct layout with the @filamentScripts directive seems to be loaded because the last few lines of the page are

<!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=8ed4c109"   data-csrf="Lsz1EVMw9bH2VpcSoumUGJfBF9YYjn3x9GIUII9S" data-update-uri="/livewire/update" data-navigate-once="true"></script>

<!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=8ed4c109"   data-csrf="Lsz1EVMw9bH2VpcSoumUGJfBF9YYjn3x9GIUII9S" data-update-uri="/livewire/update" data-navigate-once="true"></script>

<!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=8ed4c109"   data-csrf="Lsz1EVMw9bH2VpcSoumUGJfBF9YYjn3x9GIUII9S" data-update-uri="/livewire/update" data-navigate-once="true"></script>

<!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=8ed4c109"   data-csrf="Lsz1EVMw9bH2VpcSoumUGJfBF9YYjn3x9GIUII9S" data-update-uri="/livewire/update" data-navigate-once="true"></script>

and yet the sorting and searching behaviors are not working.

T

tuto1902•1/29/24, 1:23 AM

can you share the contents of

resources/views/components/layouts/app.blade.php

resources/views/components/layouts/app.blade.php

resources/views/components/layouts/app.blade.php

resources/views/components/layouts/app.blade.php
Also, are there any errors in the browser's console or network tab?

E

ErinOP•1/30/24, 5:59 AM

Thank you for looking at this for me Tuto! The gist has been updated with the layout file https://gist.github.com/wrperin/e6181516c7606e1e352bc0d424cca6ad

And yes, there are 8 console errors, may of the same error, thanks for having me check that! The console errors are about alpine js.

Alpine Expression Error: async-alpine.js?v=3.2.16.0:1 Cannot read properties of undefined (reading '$on')

Alpine Expression Error: async-alpine.js?v=3.2.16.0:1 Cannot read properties of undefined (reading '$on')

Alpine Expression Error: async-alpine.js?v=3.2.16.0:1 Cannot read properties of undefined (reading '$on')

Alpine Expression Error: async-alpine.js?v=3.2.16.0:1 Cannot read properties of undefined (reading '$on')

Alpine Warning: You async-alpine.js?v=3.2.16.0:1 can't use [x-trap] without first installing the "Focus" plugin here: https://alpinejs.dev/plugins/focus

Alpine Warning: You async-alpine.js?v=3.2.16.0:1 can't use [x-trap] without first installing the "Focus" plugin here: https://alpinejs.dev/plugins/focus

Alpine Warning: You async-alpine.js?v=3.2.16.0:1 can't use [x-trap] without first installing the "Focus" plugin here: https://alpinejs.dev/plugins/focus

Alpine Warning: You async-alpine.js?v=3.2.16.0:1 can't use [x-trap] without first installing the "Focus" plugin here: https://alpinejs.dev/plugins/focus

Uncaught TypeError: Cannot alpinejs.js?v=55c169fd:518 read properties of undefined (reading '$on')

Uncaught TypeError: Cannot alpinejs.js?v=55c169fd:518 read properties of undefined (reading '$on')

Uncaught TypeError: Cannot alpinejs.js?v=55c169fd:518 read properties of undefined (reading '$on')

Uncaught TypeError: Cannot alpinejs.js?v=55c169fd:518 read properties of undefined (reading '$on')

Gist

Livewire component with Filament table - Filament sortable() and se...

Livewire component with Filament table - Filament sortable() and searchable() not behaving as expected - ListMembers.php

E

ErinOP•1/30/24, 6:36 AM

I found this article and am trying this out https://laraveldaily.com/post/livewire-3-laravel-breeze-error-alpine-js-conflict

Laravel Daily

Livewire 3 and Laravel Breeze Error: Alpine.js Conflict

Solution

E

Erin•1/30/24, 8:11 AM

Well, I've made some progress! I used a bit of Povilas' alpine.js conflict article, and I added

use Livewire\Attributes\Layout;
#[Layout('layouts.app')]

use Livewire\Attributes\Layout;
#[Layout('layouts.app')]

in my livewire component class. This fixed my sortable and searchable problem!

E

ErinOP•1/30/24, 8:13 AM

I still am working on the layout issue with more than one slot, but that's less of a concern for my project.

E

ErinOP•1/30/24, 8:13 AM

Thanks for all your help Tuto!

T

tuto1902•1/30/24, 4:36 PM

I'm glad you were able to move forward. If there's anything else I can help you with, don't hesitate to ask

Sortable() and Searchable() not behaving as expected

Similar Threads

Similar Threads

Similar Threads