jmnda
Tailwind Javascripts stop working after live redirects between liveviews
Am using tailwind CSS and Flowbite component library. However what’s happening is that when loading a LiveView page and interact with a Flowbite component like a Modal, it’s working fine, but if I redirect to another LiveView and back to the same page, the Modal stops working. This applies to all elements that require Flowbite javascript for interaction like Accordions, Modals, Sidebars e.t.c. I tried to use CDN’s since configuring tailwind in my phoenix project was not working as well. Even after adding CDN’s, the problem still persists. Here is what I added to root.html.heex
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.3/dist/flowbite.min.css" />
<body>
. . .
<script src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"></script>
</body>
But when I use Bootstrap CSS and JS CDN’s, all the bootstrap components that use javascript work fine even if I navigate between LiveViews. Not sure what’s going on but need help ASAP.
Marked As Solved
egze
Flowbite inits the objects when the DOM loads (DOMContentLoaded event). With live navigation, this event doesn’t fire anymore, that’s why on next LiveView it stops working.
What you can do as a quick fix, is listen to LiveView events and dispatch the DOMContentLoaded event yourself, to trick Flowbite.
Put this in your app.js
window.addEventListener('phx:page-loading-stop', (event) => {
// trigger flowbite events
window.document.dispatchEvent(new Event("DOMContentLoaded", {
bubbles: true,
cancelable: true
}));
});
Also Liked
jmnda
Actually, it’s working. I didn’t realize I was testing it in the actual project and was not working, but it’s working it the repo I shared. I have also discovered that it’s only working when I add Flowbite via a CDN script tag, but not when I install it as a node_module and import it in app.js and add it to tailwind.config.js plugins. and content. Thanks very much for the help. For now, I will just work with the CDN and figure out the rest later
selimyoussry
Hey all, the solution will be soon merged into Flowbite JS, see Support phoenix liveview by jmnda-dev · Pull Request #487 · themesberg/flowbite (github.com).
I’ve pasted my patch as a PR comment if you want to get going right now.
Cheers
egze
Can you create a demo repo to reproduce? Otherwise, it’s hard to help.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Real-time error tracking, performance insights, and observability for devs.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"