A question on how exactly do links with 'navigate' and 'phx-target' work

Questions & Help Questions
, ,
1

Greetings!

For my question I have spun up a demo backed by a github repo to explain what I am facing.

The demo is a simple web app with a sidebar containing links to two pages. The pages are live views. I have used flowbite js lib to implement a sidebar with dropdown for the links. The sidebar is defined in app.html.heex so I can verify current_user (not relevant here but needed in the full project I am working on).

The tricky part: upon loading a webpage, flowbite needs to do some shenanigans with binding buttons to their element counterparts to actually control elements (by data-drawer-target etc, this is somewhat irrelevant). So I have used <.link navigate={...}> as described in LiveView docs assuming, as it says, that

They mount a new LiveView while keeping the current layout

But I have encountered that these links seem to regenerate whole layout upon clicking, thus breaking flowbyte’s bindings. You can see that by opening the drawer and clicking the link for some of the pages. Upon loading the page, you won’t be able to open the drawer until you call initDrawers() in the dev console. Same goes with dropdowns.

I have even tried to use phx-target to directly target the events to the pages’ liveviews (hence the liveview-cont class on pages’ elements). But this hasn’t changed anything.

So my question is: how does this functionality exactly have to work? I assumed that page1 and page2 are the liveviews inside my app layout that I can recreate independently.

Is there a working case on this? Please help, I am quite out of ideas :slight_smile:

My env is as follows:
elixir 1.15.7-otp-26
erlang 26.1.2
phoenix 1.7.10
phoenix_live_view 0.19.5

2

Welcome!

I’d suggest taking a look at LiveView’s guide on JavaScript interoperability — Phoenix LiveView v1.2.5.

Also, did you follow Flowbite’s Phoenix + LiveView specific installation instructions?

  1. Finally, import the Flowbite JS package inside the default ./assets/js/app.js file.

Because of how Phoenix LiveView works, you will need to import a version of Flowbite which supports the phx:page-loading-stop event listeners instead of load.

This will enable the interactive elements like dropdowns, modals, and navbars to work by hooking the event listeners and actions to the data attributes whenever a new LiveView page is loaded, after a navigate, patch or redirect. To do this add the line below to your app.js file:

3

Yes, I have completely overlooked LiveView’s instructions for Flowbite and just grabbed a regular version from CDN. Turns out, they even have a specific version for Phoenix there!

Thanks a lot!

4

You are missing something at the end of your post.