Put flash doesn't work in LiveView

Hi,

since Elixir variables are immutable the put_flash/3 in your first example doesn’t change your socket, but returns a new socket which you have to use.

In the second example you have to remove the socket from the put_flash. The pipe (|>) calls the next function with the return value of the previous one as first parameter automatically.

Your
socket |> put_flash(socket, :error, "Error!") is the same as
put_flash(socket, socket, :error, "Error!"), but you only want it once inside the call.

You could use either:

def handle_event("click", %{"content" => params}, socket) do
  {:noreply, put_flash(socket, :error, "Error!")}
end

or

def handle_event("click", %{"content" => params}, socket) do
  # This reassigns socket to the value returned by put_flash
  socket = 
    socket
    |> put_flash(:error, "Error!")
  {:noreply, socket}
end

Thanks for your answer! I changed code to

def handle_event("click", %{"content" => params}, socket) do
  IO.inspect("123")
  {:noreply, put_flash(socket, :error, "Error!")}
end

but still got nothing. I’m inclined to believe that the display error is due to the tailwind css setup.

Normally the displaying of the flashes is handled by the css.
In a default phoenix project there is something like:

.alert:empty {
  display: none;
}

and the flash inside the live template is defined like this:

  <p class="alert alert-info" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="info"><%%= live_flash(@flash, :info) %></p>

  <p class="alert alert-danger" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="error"><%%= live_flash(@flash, :error) %></p>

Did you make changes to either of these?

Nope. My live.html.heex here:

<main class="container">
  <p class="alert alert-info" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="info"><%= live_flash(@flash, :info) %></p>

  <p class="alert alert-danger" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="error"><%= live_flash(@flash, :error) %><\p>

  <%= @inner_content %>
</main>

And app.css contains:

}
.alert:empty {
  display: none;
}

Hmm, strange.

Do you have :fetch_live_flash in the pipeline in your router?

you have to use a layout in your liveview like

use Phoenix.LiveView, layout: {FooWeb.LayoutView, "live.html"}

see: Live layouts — Phoenix LiveView v1.2.5

As a follow up to a question I asked earlier on the forum regarding implementing functions to be invoked from the templates.

In this case, one would perhaps use Phoenix.LiveView.JS to compose several JS commands to extend the generated flashes. I’m thinking of Chris McChord’s demo for the release of LiveView 0.17.

Where would such code reside?

EDIT: SOLVED I tried this and it WORKED, i.e. calling inside handle_event. Delgating to another function send caused it to fail. I wasn’t sending the socket back to handle_event properly (I guess)

def handle_event("alert", values, socket) do
    {:noreply, put_flash(socket, :error, "TEST ERROR")}
  end

I have this problem too. I’ve tried all the suggestions above.

Notes:

• default alert html is from live.html (not app.html.heex) as the class=XXXXXXXXXXX is on the page. This happens even if I remove the layout definition use Phoenix.LiveView, layout...

• non-live views have the app.html.heex flash layout as expected

• The flash message does not display, and the message text is not injected

• The flash is appended to the socket as expected. So seems problem is that socket data is not making the html changes to the page.

This is a rough example of my code setup.

index.ex

defmodule MyApp.UserLive.Index do
  
  use MyApp, :live_view
  use Phoenix.LiveView, layout: {MyApp.LayoutView, "live.html"}

    def handle_events(call, _values, socket) do
       send(socket)
    end
    
    def send(socket) do
     socket =
        socket
        |> put_flash(:info, "Alert sent successfully.")
        {:noreply, socket}
    end
end

live.html (layout called above)

<main class="container XXXXXXXXXXX">
  <p class="alert alert-info" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="info"><%= live_flash(@flash, :info) %></p>

  <p class="alert alert-danger" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="error"><%= live_flash(@flash, :error) %></p>

  <%= @inner_content %>
</main>

router

import Phoenix.LiveView.Router
pipeline :browser do
  ...
    plug :fetch_live_flash
    plug :put_root_layout, {TurnStileWeb.LayoutView, :root}
   ...
  end
scope "/", MyApp do
    pipe_through :browser
    live "/myRoute",
         UserLive.Index,
         :index
end

Hi @DOKL57, sorry but I don’t understand the solution at all. It’s too complicated. After pulling my beginner hairs out, I found the solution to be super simple!!!*.

You tried 2 methods in your original code. First:

^for this, the solution is simple. Do not return {:noreply, socket}. Instead, you should return {:noreply, put_flash(socket, :error, "Error!")}. Here’s a working example:

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

For your second approach here:

^the solution is mentioned above by moogle19. You’re piping the socket into the put_flash() which means you’re actually writing put_flash(socket, socket, :error, “Error!”). Hence the error.

From moogle19’s explanation that “Elixir variables are immutable and the put_flash returns a new socket”, I looked again at what my function was returning and so found the solution to the bug in your first approach.

Hi!. I don’t know if this can help. I did have the same problem but in a LiveComponent Form. I put_flash a message but it wasn’t displayed. I noticed LiveComponent does not use <.flash_group flash={@flash} /> in layout but if you add this in your LiveComponent will work

defmodule AppTestWeb.PostLive.FormComponent do
use CharlyTeamCoachAppWeb, :live_component

  @impl true
  def render(assigns) do
    ~H"""
    <div>
      <.flash_group flash={@flash} />
      <.simple_form
        for={@form}
        id="post-form"
      />
          <!-- inputs here -->
     </.simple_form>
end

Its kind of weird. I thougth layout component would be used