9.2.9 Laravel Livewire Menu Dropdown not working after wire:navigate
I use 9.2.9 Laravel Livewire and Menu Dropdown not working after wire:navigate, I need help.
Replies (4)
Hi Davuth Nhauo
Sorry for the delay in response. Could you please try this updated code?
https://gist.github.com/faizalmy/e8f43f69aa30d5e53f569c2b26ed4c8c
Thanks
I updated already, but I met the same problem, all dropdown and modal not work after wire:navigate.
In Laravel Livewire 3 (9.2.9), dropdowns or JavaScript-driven components often stop working after wire:navigate because Livewire only updates the DOM, and your JS initialization isn’t re-run; to fix this, you should re-initialize your dropdown scripts using the livewire:load or livewire:message.processed event so they work after navigation.
https://devs.keenthemes.com/question/929-laravel-livewire-menu-dropdown-not-working-after-wirenavigatemonkey mart
// resources/js/app.js
import Alpine from 'alpinejs';
// Initialize Metronic functionality
document.addEventListener('DOMContentLoaded', function() {
initializeMetronicComponents();
});
// CRITICAL: Re-initialize after Livewire updates
document.addEventListener('livewire:navigated', function() {
initializeMetronicComponents();
});
// CRITICAL: Re-initialize after any Livewire content updates
document.addEventListener('livewire:updated', function() {
initializeMetronicComponents();
});
// Centralized Metronic component initialization
function initializeMetronicComponents() {
// Initialize all Metronic components
if (window.KTDrawer) {
KTDrawer.createInstances();
}
if (window.KTMenu) {
KTMenu.createInstances();
}
if (window.KTSticky) {
KTSticky.createInstances();
}
if (window.KTScrolltop) {
KTScrolltop.createInstances();
}
if (window.KTImageInput) {
KTImageInput.createInstances();
}
if (window.KTPasswordMeter) {
KTPasswordMeter.createInstances();
}
// Add other Metronic components as needed
}
window.Alpine = Alpine;
Alpine.start();
