all components freeze after wire:navigated problem
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. seems that metronic team are using local variables to set initiated components instead of element attributes wich leads to the problem.
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 (4)
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!
Hi Mohamed Boulbab
Could you please check the issue related here?
https://devs.keenthemes.com/question/problem-with-livewire-v3-function-wirenavigate#answers
https://devs.keenthemes.com/question/components-freeze-after-livewire-navigate
Hopefully, it works for you.
Thank you
hello sir Faizal, thank you for replying
These solutions are 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, but seems that it is not working as expected.
I think you should create a reset function that will reset all initiated variables and KT components, it will help us a lot when the user navigate between pages using wire:navigated. the source of this problem in your js scripts.bundle.js, you are using generic variables (KTMenuHandlersInitialized, KTScrollHandlersInitialized, KTStickyHandlersInitialized, ....) it is very hard to work with these in dynamic content.
please to share any solution to reset all components at once so everything will work as expected when calling KTComponents.init() as it is a full reload
hello sir Faizal, any help pls
