Problem with Livewire v3 function "wire:navigate"
Hello, I have a problem with "wire:navigate" function of new Livewire v3. When page fully load (with reload button), all javascript works (for example top right account menu or light/dark hover), but after clicking on link with "wire:navigate" (doesn't do refresh, just rewrite full HTML page without page refresh), this functions stop working. Funny is that top left button for shrinking navigation still works, but none of these interactive functions inside <body> doesn't work. (the shrinking button works only after I change every "DOMContentLoaded" to "livewire:navigated", not with default javascript)
I tried replacing "DOMContentLoaded" with "livewire:navigated" as Livewire documentation says but no success.
I would really love to have Metronic with Livewire as "SPA" application for faster admin dashboard.
Can you help me with this? Thank you very much.
Replies (10)
Hello,
I encountered the same issue with the "wire" function in Livewire v3, where JavaScript functions (like the top-right account menu and hover effects) stopped working after navigating, despite working fine on the initial page load.
Initially, I tried using the "livewire:navigated" event, as suggested in the Livewire documentation, but that didn’t resolve the problem.
To fix this, I added the following code, which reinitializes the necessary JavaScript functions when Livewire re-renders components:
<livewire:partials.user-accounts lazy />
Livewire.hook("element.init", ({component, el}) => {
KTMenu.init = function() {
KTMenu.createInstances();
KTMenu.initHandlers();
};
KTMenu.init();
})Hi,
Same issue is in tailwind version.
I have Laravel +Tailwind +Livewire, i spend more than 2 days to find a solution despite the thing that... is not any error. Thank you Vladislav.
@Faizal : maybe will be beter to insert some comments about that.
Thank you for your effort in finding the solution! I'm glad to hear that you got it working. Hopefully, your solution will be helpful to others facing a similar issue. If you have any more questions or need further assistance, feel free to ask.
Hello,
It did not worked for me,
<code?
// Global initialization
KTMenu.init = function() {
KTMenu.createInstances();
/*if (KTMenuHandlersInitialized === false) {
KTMenu.initHandlers();
KTMenuHandlersInitialized = true;
} */
KTMenu.initHandlers();
};
I did make if condition commented, but when page loads with wire: navigate, top hover menu not working.
This code is in part of resources\_keenthemes\src\js\components\menu.js, and even changed in public\assets\js\scripts.bundle.js, but still same.
Or in which script, I need to change this?
How to get this fiex?
Hello there,
this lines of code are in "scripts.bundle.js" file, search for "KTMenu.initHandlers()", this section should look like this after necessary code comment:
// Global initialization
KTMenu.init = function () {
KTMenu.createInstances();
// if (KTMenuHandlersInitialized === false) {
KTMenu.initHandlers();
// KTMenuHandlersInitialized = true;
// }
};Also you have to change every "DOMContentLoaded" to "wire:navigated", but i think you already did this as livewire documentation says.
If you have any other questions, feel free to ask, I'm happy to help others with this problem because I spent a few hours trying to figure it out myself.
Hello Vladislav,
Thank you for your solution, but I gone through below solution and it worked for me,
https://devs.keenthemes.com/question/components-freeze-after-livewire-navigate
Well it looks like other way to do it, but both are working. My way modifies already existing code, their way adds new event listener to reinitialize KTMenu after every navigation.
I'm happy to hear that you have it fixed.
Hi Vladislav Kresta,
Apologies for the delay. Thank you for sharing your solution.
Did simply editing this part resolve the issue for you?
Did removing the conditional check and directly calling `KTMenu.initHandlers()` resolve the issue for you?
KTMenu.init = function () {
KTMenu.createInstances();
KTMenu.initHandlers();
};Yes, this resolve the issue, you can close this ticket, thank you very much!
Well i got it working, but I think it should be somehow updated/fixed.
In this piece of code, there is condition, that runs "initHandlers()" but with wire:navigate, this condition is true only once, so if I remove this if condition and only call initHandlers(), it works.
KTMenu.init = function () {
KTMenu.createInstances();
if (KTMenuHandlersInitialized === false) {
KTMenu.initHandlers();
KTMenuHandlersInitialized = true;
}
};
