DestroyedSoul

DestroyedSoul

Hello,

I am using Flowbite in my code for a dropdown component.
I use Flowbite via CDN. Here’s the code in question:

      <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.phoenix.min.js">
      </script>
      <button
        id="dropdownDefaultButton"
        data-dropdown-toggle="dropdown"
        class="bg-white hover:bg-accent/20 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center border"
        type="button"
      >
        Click
      </button>
     <!-- Dropdown menu code -->
    <div id="dropdown" class="z-10 hidden bg-background-secondary rounded-lg shadow w-60">
        <ul class="p-3 space-y-1 text-lg text-primary" aria-labelledby="dropdownDefaultButton">
          <!-- some code here -->
        </ul>
    </div>

The problem, as usually is with live views.
Let’s call the screen with dropwons Screen A. When I enter it, dropdown works, then I go to screen B and back to screen A → the dropdown works.
But when I go to screen B and push_navigate from there to Screen A, the dropdown does not work (i.e. it’s not displayed after clicking the button).

I have tried solutions from here: Tailwind Javascripts stop working after live redirects between liveviews
It did not help.

Could you please advise whether I am doing something wrong?

Showing Posts 1 to 4

jmnda

jmnda

I tried to reproduce on my end but everything is working fine. Can you share the whole LiveView or if possible create a demo repo?

DestroyedSoul

DestroyedSoul OP

Here’s the repo.

It’s even worse than in my project.
If you load the page as localhost:4000/view-b, then the dropdown works. If you go there from home or view-a, it doesn’t.

jmnda

jmnda

I checkout out your repo and after testing, I think he issue is that you added the script tag for Flowbite in the LiveView markup instead of the root.html.heex. Putting it in the <head> of the root.html.heex resolves the issue, that’s because the script is loaded upfront so every navigate/patch which dispatches phx:page-loading-stop event after the update will initialize Flowbite js enabling the interactive elements like dropdowns, modals, and navbars to work.

DestroyedSoul

DestroyedSoul OP

That was it!
Thank you a lot.

— All posts loaded —

Where Next? Top

Trending in Questions Top

stjefim
Hello! Suppose you are building workflow (order / task / payment) processing system with the following requirements: Each workflow con...
New
water
I’m aware of 2 such projects, are there others? git: GitHub - team-alembic/realworld: A fullstack Phoenix LiveView application with back...
New
peck
Hi everyone. My team and I have been working on a fairly modest app based around video streaming and chat, but we’ve landed a customer t...
New
leoschweizer
Hi, we run different LLM models across a cluster, with each node loading a configurable subset. Model-specific queues let nodes consume ...
New
csmr
Hi all, I’m new here and would like to hear peoples views on my Elixir/Phoenix based game-engine! :smiley: Mutonex gamedesign was finish...
New
perzanko
Do we have maintainer of absinthe-graphql/dataloader here? We have a PR that we’d like to merge to the library. Relatively small additive...
New
Stef-Verniers
Hello I’ve been coding in Elixir for almost two years now because of my current job where we implemented Elixir in our application. But ...
New

Other Trending Topics Top

dominicletz
Hey there, I haven’t seen a list of useful Elixir specific skills for the popular AI tools yet so I’m starting one here with my first. ...
New
mudasobwa
I fully migrated to my own harness from Anthropic/Gemini and I think it’s time to share it. Welcome DSH, the DeepSeek Harness, fully writ...
New
KristerV
Hey. Is there anyone here who creates agents in their apps? Not talking about using agents, but creating them. I’m finding it pretty diff...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
webofbits
With AI doing more of the implementation work, I’ve been wondering how much coding I should deliberately keep doing myself. My main conc...
#ai
New
budgie
I love Elixir. It’s one of 2 programming languages I’ve ever fallen in love with. But I don’t use it anymore. Serverless was the promis...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews