F
Filament•2mo ago
o.m

Why is livewire dispatch not triggering the function?

I have a custom field in Filament called custom-repeater.blade.php contains this script, after rearranging the order 
<script>
        document.addEventListener('DOMContentLoaded', () => {
            initializeSortable();
        });

        function initializeSortable() {
            const sortableElement = document.getElementById('sortable');
            if (sortableElement) {
                const sortable = new Sortable(sortableElement, {
                    handle: '.sortable-handle',
                    animation: 150,
                    onEnd: (event) => {
                        const newOrder = Array.from(event.to.children).map(item => item.dataset.index);
                        Livewire.dispatch('reorder', newOrder);
                    },
                });
            }
        }
    </script>
<script>
        document.addEventListener('DOMContentLoaded', () => {
            initializeSortable();
        });

        function initializeSortable() {
            const sortableElement = document.getElementById('sortable');
            if (sortableElement) {
                const sortable = new Sortable(sortableElement, {
                    handle: '.sortable-handle',
                    animation: 150,
                    onEnd: (event) => {
                        const newOrder = Array.from(event.to.children).map(item => item.dataset.index);
                        Livewire.dispatch('reorder', newOrder);
                    },
                });
            }
        }
    </script>
The main problem is that It doesn't trigger this function inside the livewire class at EditGroupSetting.php It should be able to call that function once I drag the button 
    public function reorder(): void
    {
        dd("Hellow orld");
        $this->options = array_values($this->options);
    }
    public function reorder(): void
    {
        dd("Hellow orld");
        $this->options = array_values($this->options);
    }
3 Replies
o.m
o.mOP•2mo ago
I have updated the code to this based on the documentation 
    <script>
        document.addEventListener('livewire:init', () => {
            const sortableElement = document.getElementById('sortable');
            if (!sortableElement || sortableElement._sortableInitialized) return;

            sortableElement._sortableInitialized = true;

            const sortable = new Sortable(sortableElement, {
                handle: '.sortable-handle',
                animation: 150,
                dataIdAttr: 'x-sortable-item', // use the x-sortable-item attribute as the ID
                onEnd: () => {
                    const newOrder = sortable.toArray(); // array of x-sortable-item values
                    Livewire.dispatch('reorder', { order: newOrder });
                    console.log(newOrder);
                },
            });
        })
    </script>
    <script>
        document.addEventListener('livewire:init', () => {
            const sortableElement = document.getElementById('sortable');
            if (!sortableElement || sortableElement._sortableInitialized) return;

            sortableElement._sortableInitialized = true;

            const sortable = new Sortable(sortableElement, {
                handle: '.sortable-handle',
                animation: 150,
                dataIdAttr: 'x-sortable-item', // use the x-sortable-item attribute as the ID
                onEnd: () => {
                    const newOrder = sortable.toArray(); // array of x-sortable-item values
                    Livewire.dispatch('reorder', { order: newOrder });
                    console.log(newOrder);
                },
            });
        })
    </script>
However, it still does not trigger the function on the livewire class
YuXin Zhai
YuXin Zhai•2mo ago
change Livewire.dispatch('reorder', { order: newOrder }); to $wire.reorder(newOrder);
o.m
o.mOP•2mo ago
Thanks for the hint

Did you find this page helpful?