Basics....Swapping content in Liveview when value is changed

Phoenix Forum Questions / Help
, ,
1

Hello everyone, I’m new to Elixir, Phoenix, and Liveview so I’m hoping that this question isn’t too basic.

I have a Liveview that currently should show a different set of HTML based on an assign that I update on click:

    <div>
    <div style="height: 70px; background-color: #00558c;">
            <div style="width: 95%; margin: auto; display: flex; flex-direction: row; justify-content: space-between">
            <div style="color: white; font-size: 30px; font-family: Arial; margin-top: 18px; font-weight: bold;">HL7 Visualizer</div>
            <label class="switch"><input type="checkbox" id="togBtn" class="<%= if @mode == :mode2 do %>checked <% end %>"><div class="slider round" phx-click="toggle"><!--ADDED HTML --><span  phx-click="message_list" class="on"><%= @mode %></span><span class="off"><%= @mode %></span><!--END--></div></label>

    </div>
</div>
    <%= if @mode == :mode1 do %>
        <div style="margin-top: 30px">
            <%= for msg <- @raw_msg do %>
                <div style="margin-bottom: 10px; max-width: 95%; margin-left: auto; margin-right: auto; overflow-wrap: break-word; overflow-y: hidden;"><%= msg %></div>
            <% end %>
        </div>
    <% else %>
        <div class="font-mono bg-white rounded-lg shadow-xl w-full px-6 py-3">
            <%= for {seg, idx} <- Enum.with_index(@msg_list) do %>
            <div class="block border border-gray-250 rounded-sm px-4 py-2 whitespace-no-wrap"><%= Enum.at(seg, 0) %></div>
            <div id="seg"  phx-click="show-detail" style="margin-right: 0px !important" class="ml-5 mt-1 mr-0 flex flex-wrap"><%= for {field, idx} <- Enum.with_index(seg) do %>
                <%= if field == "" do %>
                    <span class="block border border-gray-250 rounded-sm px-1 py-2 whitespace-no-wrap "><%= field %></span>
                <%= else %>
                    <span class="block border border-gray-250 rounded-sm px-4 py-2 whitespace-no-wrap  max-w-md overflow-hidden" style="text-overflow: ellipsis;"> <%= field %></span>
                <%= end %>
            <% end %></div>
            <% end %>
        </div>

        <%= if @show_detail == :true do %>
            <div class="ml-5 mt-3 flex-col flex flex-wrap" style="max-height: 300px"><%= for comp <- @msg_seg do %>
                <div class="flex w-200"><%= comp %></div>
                <% end %></div>
                <!--<%= render("detail.html", assigns) %>-->
        <% end %>
    <% end %>

When I load the liveview, the first set of HTML is rendered correctly and when I press the button that updates the @mode assign, it renders the new HTML correctly as well. My issue is that when I try to press the button again to set the mode back to :mode1 and render the first set of HTML again, the liveview actually renders both sets of HTML on top of each other in a weird way. I can’t seem to figure out what the issue is here. Also, I would appreciate it if any experts could illuminate a better way to achieve this if there is one

Edit: Here’s the Liveview code as well

defmodule MyAppWeb.VisualizerView do
  use Phoenix.LiveView

  def render(assigns) do
    MyAppWeb.PageView.render("visualizer.html", assigns)
  end

  def mount(_session, socket) do
    raw_msg = raw_message()
    msg_list = message_list()
    msg_seg = message_seg(0)
    {:ok, assign(socket, mode: :mode1, raw_msg: raw_msg, msg_list: msg_list, msg_seg: msg_seg, show_detail: :false)}
  end

  def handle_event("toggle", _, socket) do
    {:noreply, update(socket, :mode, fn
      :mode1 -> :mode2
      :mode2 -> :mode1
    end )}
  end

  def handle_event("show-detail", _, socket) do
    {:noreply, update(socket, :show_detail, fn
      :false -> :true
      :true -> :false
    end )}
  end
end
2

It might be an issue with morphdom not correctly detecting the changed parts to update. Maybe try wrapping tags around those string values.

3

Sorry, what are the string values you’re referring to?

4

Probably this one :slight_smile:

5

Oh sorry, I have actual HTML wrapped in divs there, I just left it out so that I didn’t clutter up the post.

6

No need to be sorry :slight_smile: , but the code You put has no tags, so it can be confusing

7

Can you share your exact template and LV code? It may be an invalid markup issue or possibly a bug on our side, but we need to know more to say for sure. Thanks!

8

I’ve added the full template and LV code, just changed the name of the module and removed some functions that have nothing to do with the template

9

It looks like the issue is you are duping the seg id. Every container in one of the comprehensions is getting the same id (<div id="seg"...) which is breaking our DOM diffing because morphdom does not know how to diff the duplicate IDs. This may be something we can detect on the morphdom side, but the correct fix would be to drop the ID or assign a unique ID for each container.

9 Likes
10

Thanks! This was the problem. I’m new to web and didn’t even know about that. I appreciate you taking the time to answer the question.

2 Likes
11

I solved it like this

<div class="page">
 
        <%= case @display do %>
          <% "chat" -> %>
            <%= render "chat_room.html", assigns %>
          <% "members" -> %>
            <%= render "chat_users.html", assigns %>
        <% _ -> %>
        <% end %>

        <%= render "chat_menu.html", assigns %>

      </div>