Functional LiveView inside a jquery modal

Phoenix Forum Questions / Help
,
1

Hi

I would like to have a fully functional LiveView inside a jquery modal (https://jquerymodal.com/).

What I have done is:

  1. I open the jquery modal using (form LiveView bell icon, that is why there is @socket):
<a href={Routes.notifications_path(@socket, :list)}, rel="modal:open">
  1. live_render the LiveView module from the normal component (so I can remove they layouts):
  def list(conn, _params) do
    conn
    |> put_root_layout(false)
    |> put_layout(false)
    |> live_render(AppWeb.NotificationsLiveList, session: %{
      ...
    })
  end
  1. In the AppWeb.NotificationsLiveList, the mount function does what it needs (assigns some values, etc).

The content will be displayed correctly, but it seems that I cannot use phx-click (and others) from that HTML/HEEx. Why?
I see that the whole content is in LiveView <div> with all the necessary session info.

2

my guess is that by using put_root_layout(false) you are not loading root.html.heex which in turn loads app.js which probably attaches the event listeners.

on a related note, do you need jquery? most devs around here seem to prefer https://alpinejs.dev/ for jquery-like trickery including modals, and it plays nicely with phoenix.

1 Like
3

Yeah, I’ve just found out that this put_root_layout is problematic. Thanks!
Do I really need jquery? Most likely not. I would assume that as some point I will remove it or replace it with something different, but for now - I’m using it in some places.

1 Like
4

also check how phoenix itself users plain css modals - you don’t need jquery nor alpine for that really:

1 Like
5

Thank you. For sure I will take a look and will try to use that rather than jquery.

1 Like