Metronic in Rails 7 with Turbo
Hi,
I'm looking for some help regarding using Metronic with Rails 7 and turbo. I am struggling with some of the javascript not working after changing pages on the site. The problem I am focusing on at the moment is accordions in the dashboard side menu not working after a page change, but there are other things that stop working after changing pages.
I attempted to replace all the events from "DOMContentLoaded" to "turbo:load" in assets/js/scripts.bundle.js and assets/plugins/global/plugins.bundlejs but the issue persists.
I also attempt to manually re-initialize the elements by adding a "turbo:load" even listener and calling the init() functions but that didn't work.
document.addEventListener("turbo:load", () => {
KTApp.init();
KTDialer.init();
KTDrawer.init();
KTImageInput.init();
KTMenu.init();
KTPasswordMeter.init();
KTScroll.init();
KTScrolltop.init();
KTSticky.init();
KTSwapper.init();
KTThemeMode.init();
KTThemeModeUser.init();
KTToggle.init();
KTUtil.init();
KTMenu.createInstances();
});I am not super familiar with how those work, so this was a shot in the dark to see if something would work, but nothing did.
It seems like I am really close to making it work but this is where I got stuck. I am hoping to be able to use turbo along with Metronic. Any suggestions on what I could do?
Replies (10)
I'm facing the exact same issue. Wrapping the KTComponents.init() like this:
document.addEventListener("turbo:load", () => {
console.log("foo");
KTComponents.init();
});gives me "foo" at every request, but still no working dropdowns other then after the initial page (re)load.
As an ugly workaround I now have to make sure every link has a `data-turbo="false"` attribute...
Have you resolved this issue? I have same problem
Unfortunately not... Will give it another shot today.
I got something... It has everything to do with the "Global initialization" part at the bottom of menu.js. KTMenuHandlersInitialized starts out as false and so initHandlers() is called and KTMenuHandlersInitialized is set to true.
With our approach even though the html gets replaced, the javascript instances remain in place and since KTMenuHandlersInitialized is set to true, initHandlers() is NOT being called. Resulting in the newly rendered html not having the handlers...
The question now is: How to resolve this?
Did you found a solution?
Not really. As a workaround I commented out the line where KTMenuHandlersInitialized is set to true...
hi, this solved every thing for me on rails 7.1 with Turbo:
https://devs.keenthemes.com/question/dropdown-sidebar-not-working-with-turbo-rails-rails-7
Hi,
Thank you for your reply, I believe I have all the JS and CSS loaded correctly as everything seems to work when I first load the page or when I do a manual refresh. The issue is when I click a link, Rails turbo refreshes the DOM without reloading the browser and the Javascript stops working.
Doing console.log allowed me to see that all the KTApp, KTUtil, etc. objects are available but I'm not sure how to figure out the order that they should be initialized. Is it somewhere in the docs? If not, do you have any tips?
Hi,
If you are using Metronic 8.2.x you can call KTComponents.init() whenever you reload the page content dynamically to reinit pending and newly populated components and plugins.
More info: Metronic Core Components Init Docs.
Regards.
Hi Nicolas,
Sorry for the delay in response.
Double-check that all your Metronic JavaScript and CSS assets are loading correctly. Make sure they are being included appropriately.
For debugging purposes, try using console.log(KTApp). Confirm that each variable, such as KTApp, KTUtil, etc., can be accessed globally without any issues.
Ensure that the order of initialization for your Metronic components is correct. Some components may depend on others, so initializing them in the right order is required.
Thanks
