Liveview replacing parent of nested content

Questions & Help Questions
,
1

I only want to update the value of the inner h1, however liveview is replacing the whole nested structure. JS acts on the outer div to change display. How do I prevent liveview from resetting the whole structure?

EDIT: A live component cannot be used, unless is can be added conditionally when the template is not live.

<div id="waiting-overlay">
  <div style="position: relative">
    <h1 id="waiting-text" phx-update="replace">
      <%= @waiting_text %>
    </h1>
  </div>
</div>

  def handle_info(:waiting_text, socket) do
    Process.send_after(self(), :waiting_text, 5_000)
    
    new_content = "Updated content at #{DateTime.utc_now()}"
    {:noreply, assign(socket, waiting_text: new_content)}
  end
2

LiveView controls the state of the DOM. You should use a hook if you want to have javascript work within a live view controlled area so that the changes you want to do in JS can be reapplied after each morphdom invocation.

3

ty :slight_smile: Why is it controlling and area larger than defined? I only want it to update <%= @waiting_text %> or "waiting-text" and nothing beyond it… the granularity does not exist?

4

The area it’s defined is everything in the live layout, not just the part inside of <%= %>. It’s a “live view” not just a dynamic spot on the page. The whole view is controlled by morphdom. This allows the server to operate as the source of truth on what is shown to the user.

5

So Im left with reapplying JS? Thats just wasteful… there should be degrees of strictness, or more granular control over effected areas

6

I would recommend reading the guides on JavaScript interoperability — Phoenix LiveView v1.2.5. That’s the official answer on the kind of stuff you’re trying to do.