Why phx-update doesn't work with elixir functions?

Phoenix Forum Questions / Help
,
1

Hello there! I have a simple div containing chat messages and It’s works correctly. New messages are displayed, old ones remain too.

    <div id="chat-messages" phx-update="append">
        <%= for message <- @messages do %>
              <p id={message.uuid}><b style="color:red"></b><%= message.content %></p>
        <% end %>
    </div>

But as soon as I create a function to distinguish between system messages and user messages, when I try to send a new message, the old message is deleted, but the messages themselves are displayed correctly.
I suspect the problem may be that phx-update isn’t working properly. Why is this happening?
Code:

    <div id="chat-messages" phx-update="append">
        <%= for message <- @messages do %>
            <%= display_message(message) %>
        <% end %>
    </div>


  def display_message(%{type: :system, uuid: uuid, content: content}) do
      ~E"""
      <p id={uuid}><b style="color:red"></b><%= content %></p>
      """
  end

  def display_message(%{uuid: uuid, content: content, username: username}) do
    ~E"""
    <p id={uuid}><b style="color:red"><%= username %>: </b><%= content %></p>
    """
end

Thanks in advance!

2

I don’t know exactly why this isn’t working but maybe components can help you out: Phoenix.Component — Phoenix LiveView v0.17.7

3

Thanks for your answer! I think Components It’s not exactly what I want.
I figured out what’s was wrong. HTML code inside elixir functions was built with ~E sigil (for leex templates), I chanded it to ~H sigil (for heex templates) and and now everything works.

  def display_message( assigns = %{type: :system, uuid: uuid, content: content}) do
      ~H"""
      <p id={uuid}><b style="color:red"></b><%= content %></p>
      """
  end

  def display_message(assigns = %{uuid: uuid, content: content, username: username}) do
    ~H"""
    <p id={uuid}><b style="color:red"><%= username %>: </b><%= content %></p>
    """
end