problem with wire:nagivate and metronic
Hello, I have a problem using metronic 8.2.X laravel starter kit (didn't test previous versions) with "wire:navigate" Livewire v3.4.
When page fully hard reloaded, all javascript works fine (menus, steppers, dropdowns, ...), but after clicking on link with "wire:navigate" this functions stop working.
I replaced "DOMContentLoaded" with "livewire:navigated" as Livewire documentation says but no success.
is there any solution to that pls, have someone faced this problem before, I took a look on all other similar questions here but no one is actually talking about reseting the whole KT components, I found how to reset KTMenu and so, but the problems persists will all the components.
// On document ready
if (document.readyState === "loading") {
document.addEventListener("livewire:navigated", function() {
setTimeout(() => {
console.log('init KTComponents')
KTComponents.init();
}, 10);
});
} else {
KTComponents.init();
}
KTcomponents is indeed intiated every time but most of components are not functionning correctly.
also tested persist, data-navigate-once, or even tried to recall the file each time that leads to strange behaviours and nothing fully works.
Replies (7)
It seems like a tricky issue with Metronic and Livewire. Have you checked for JavaScript errors after wire:navigate? Also, consider taking a free iq test for a quick mental boost while troubleshooting. Good luck!
Hi,
Could you try editing these two files? We've done some testing, and hopefully, this will work for you.
1. File: /src/js/components/util.js
Change: Add the following line:
document.addEventListener("livewire:navigated", callback);Updated code:
onDOMContentLoaded: function(callback) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", callback);
document.addEventListener("livewire:navigated", callback);
} else {
callback();
}
},2. File:
/src/js/components/menu.jsChange: Modify the condition in function
var _click. Update !== to ===. Updated code:
var _click = function(element, e) {
if (element.hasAttribute("href") && element.getAttribute("href") === "#") {
return;
}
// Rest of the code...
};Let us know if this resolves the issue!
Hi Mohamed Boulbab
Apologies for the delay.
The features typically work out of the box and are usable by other developers through various methods and frameworks . However, for this issue cases, Laravel with wire:navigate, we need to find a solution. It seems the existing workaround isn't functioning as expected.
We'll need to revisit the cod, readjust it and test for this particular Laravel wire:navigate to resolve the issue.
Thank you for your patience.
ok, I hope you can find a solution for this, maybe you can integrate it out of the box in your laravel starter kit next version, I think it will be a good idea and great help for developers.
what kind of support you are providing if you can't fix this ?
Hi Mohamed,
Apologies for the delay. Could you please try removing the `KTMenuHandlersInitialized` check? This way, every time the `init` function is called, `KTMenu.initHandlers()` will be executed without skipping it.
Here's how you can modify it:
KTMenu.init = function() {
KTMenu.createInstances();
//if (KTMenuHandlersInitialized === false) {
KTMenu.initHandlers();
//KTMenuHandlersInitialized = true;
//}
};This should initialized KTMenu.initHandlers each time `KTComponents.init()` is called.
Let me know if this works for your dynamic content issue!
hello sir Faizal, thank you for replying
this solutions is only for KTMenu, I'm using a lot of features of KTcomponents since I'm sharing a lot of modals and features between my pages. the problem is that I tried to re-initiate these components one by one without calling KTComponents.init(), but seems that it is not working as expected.
please to share any solution to reset all components at once so everything will work as expected when calling KTComponents.init()
