Put flash doesn't work in LiveView

Hello! I stuck with the display flash at my LiveView template. And whatever I do, I don’t see the message on the page. I have two fields and handle_event. The content of the handle event isn’t important, but it’s important to understand that if I write an IO.input in it, I get a message in the console. But if I try to put_flash, nothing will happen

  def handle_event("click", %{"content" => params}, socket) do
          IO.inspect("test") # I see "test" in console
          put_flash(socket, :error, "Error!") # I don't see flash on page
          {:noreply, socket}
  end

I also tried to write code like this:

  def handle_event("click", %{"content" => params}, socket) do
          IO.inspect("test") # I see "test" in console
          # I don't see flash on page
          {:noreply, socket |> put_flash(socket, :error, "Error!") }
  end

and nothing happens.
Why don’t see flashes on the page? Could this be because tailwind and alphine.js were installed?

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
2 Likes

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?

2 Likes

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 v0.17.6

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?