DOMContentLoaded and livewire:navigated Issue Causing Callback Duplication in Metronic Laravel
In my Metronic Laravel project, I am experiencing a problem where JavaScript callbacks defined inside KTUtil.onDOMContentLoaded are being executed multiple times. This behavior results in unintended duplication of actions, such as initializing Quill editors and logging repeated console messages.
The issue is particularly tied to the livewire:navigated event listener inside the onDOMContentLoaded function in KTUtil. The relevant function is as follows:
onDOMContentLoaded: function(callback) {
console.log("KTUtil.onDOMContentLoaded called!");
if (document.readyState === "loading") {
console.log("Adding DOMContentLoaded and livewire:navigated listeners...");
document.addEventListener("DOMContentLoaded", callback);
document.addEventListener("livewire:navigated", callback);
} else {
console.log("DOMContentLoaded already triggered, executing callback directly...");
callback();
}
}How the Issue Manifests:
1.The livewire:navigated event is triggered multiple times during Livewire’s SPA-like DOM updates.
2.Each time the livewire:navigated event fires, the callback is executed again, causing redundant initializations (e.g., multiple Quill editor instances or duplicate event listeners).
3.This leads to:
•Performance degradation.
•Multiple toolbars in Quill editors.
•Repeated log messages in the console.
•Unnecessary DOM manipulations.
When the livewire:navigated listener is removed or commented out, the problem is resolved, and the callbacks behave as expected.
Proposed Fix or Suggestions:
1.Avoid Automatically Binding livewire:navigated in onDOMContentLoaded:
Instead of binding the callback to both DOMContentLoaded and livewire:navigated within the same function, handle Livewire-specific logic separately. For example:
onDOMContentLoaded: function(callback) {
console.log("KTUtil.onDOMContentLoaded called!");
if (document.readyState === "loading") {
console.log("Adding DOMContentLoaded listener...");
document.addEventListener("DOMContentLoaded", callback);
} else {
console.log("DOMContentLoaded already triggered, executing callback directly...");
callback();
}
}
// Handle Livewire-specific logic independently
document.addEventListener("livewire:navigated", function() {
console.log("Livewire navigated triggered...");
// Callbacks or updates specific to Livewire can be handled here
});2.Prevent Callback Duplication via Flags:
Use a flag to ensure the same callback is not executed multiple times:
let isCallbackExecuted = false;
onDOMContentLoaded: function(callback) {
if (isCallbackExecuted) {
console.warn("Callback already executed. Skipping...");
return;
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => {
if (!isCallbackExecuted) {
isCallbackExecuted = true;
callback();
}
});
} else {
if (!isCallbackExecuted) {
isCallbackExecuted = true;
callback();
}
}
}3.Document in Metronic Documentation:
This behavior may not always be relevant for every project. Consider documenting or providing configuration options for developers who may not need livewire:navigated in onDOMContentLoaded.
Steps to Reproduce the Issue:
1.Use Metronic Laravel with Livewire components.
2.Define a callback in KTUtil.onDOMContentLoaded that initializes a DOM-dependent library (e.g., Quill).
3.Perform a Livewire-triggered navigation or update.
4.Observe that the callback is executed multiple times for every livewire:navigated event, even though it was already executed during the initial DOMContentLoaded.
I commented out the document.addEventListener('livewire:navigated', callback); line within the onDOMContentLoaded function. This resolves the duplication issue but may not be ideal for all use cases where Livewire updates require reinitialization.Please let me know if more details or a demo of the issue is required. Thank you for addressing this! 😊
Replies (4)
I experienced the same issue. The onDOMContentLoaded is executing the callback multiple times when livewire:navigated is triggered. This happens because Livewire navigations (e.g., when using wire:navigate) fire the livewire:navigated event, causing the callback to run again even after the initial DOMContentLoaded event.
The fix i came up with was: Remove Event Listeners After Execution.
To ensure that the callback is executed only once, I removed the event listeners after they fire.
My updated code is:
onDOMContentLoaded: function(callback) {
console.log("KTUtil.onDOMContentLoaded called!");
function handler() {
console.log("Executing callback...");
callback();
document.removeEventListener("DOMContentLoaded", handler);
document.removeEventListener("livewire:navigated", handler);
}
if (document.readyState === "loading") {
console.log("Adding DOMContentLoaded and livewire:navigated listeners...");
document.addEventListener("DOMContentLoaded", handler);
document.addEventListener("livewire:navigated", handler);
} else {
console.log("DOMContentLoaded already triggered, executing callback directly...");
handler();
}
}
The above appears to work correctly for me.
Thank you,
Nayim.
Puzzle Lover
I usually stick to puzzle games, but slope caught my attention with its simple mechanics and challenging gameplay. It’s almost like solving a fast-paced puzzle where every move has to be calculated within a split second. The satisfaction of making it through tricky sections is unmatched, and the randomness of the obstacles keeps it fresh every time I play.
It sounds like a frustrating issue with the tentLoaded function causing multiple executions! This can definitely lead to confusion, especially with repeated console messages. To mitigate such problems, consider debouncing the event listener. On a lighter note, while troubleshooting, why not take a break with the pacman 30th anniversary game? It's a classic that never gets old!
Hi Omer
Could you please check this post about a similar issue? Hopefully, it helps.
https://devs.keenthemes.com/question/components-freeze-after-livewire-navigate#answers
Thanks
