How to show flash from live view?

Phoenix Forum Questions / Help
,
1

I have some code like this:

  def handle_event(
        "give-accolade",
        _,
        socket
      ) do
    {:noreply, put_flash(socket, :error, "Error!")}
  end

And I want to show a flash message but it doesn’t show.

At the top of the file is defined

  use TeiserverWeb, :live_view

So I believe this is a live view.

Inside my root.html.heex I can see this:

  <body class="container-fluid px-0 d-flex flex-column">
    <.flash_group flash={@flash} />
    <%= @inner_content %>
  </body>

And copying that code

 <.flash_group flash={@flash} />

to my liveview heex makes it work but it shows at the wrong location.

2

Your root layout will be static. When you use <%= @inner_content %> within that layout it is a reference to the live.html.heex file / html / page. You need to structure the code / html in such a way that live components are confined to live.html.heex. Bearing in mind that whatever is there, in live.html.heex, liveview takes full control of. What that means practically is that you can not modify it directly with JS as liveview will overwrite those changes.

1 Like
3

Helpful or am I missing the point?

4

Basically I don’t understand why my flash message doesn’t show by default. Why do I need to manually add

<.flash_group flash={@flash} />

to my liveview when it is already in the root layout. For some reason the flash component in the root layout doesn’t show any flash message even when the socket updates.

5

The layout is static. Liveveiw has no control over it. So you remove it from the layout and add it to your liveview heex that liveview has control over. Why? I can only speculate. I do see the value in limiting liveviews control.

1 Like
6

Well I fixed the issue by moving the flash_group component from root layout to app layout.
So in file root.html.heex

  <body class="container-fluid px-0 d-flex flex-column">
    <.flash_group flash={@flash} />
    <%= @inner_content %>
  </body>

Change to

  <body class="container-fluid px-0 d-flex flex-column">
    <%= @inner_content %>
  </body>

And inside app.html.heex simply add

    <.flash_group flash={@flash} />

to the top.