[Q] Should we document better that liveview takes control over html elments that don't have any variables defined?

Phoenix Forum Questions / Help
,
1

I solved the issue but I wanted to raise this so we maybe can find a better solution for new users:

I wanted to add a simple map to a liveview page and it took much longer than expected.

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
var map = new maplibregl.Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json',
  center: [-74.5, 40],
  zoom: 9
});
</script>

I figured out that the reason must be liveview because it works in a normal controller.
It turned out that I had to add phx-update="ignore", it took so much time debugging that I almost gave up.
It probably is somewhere deep in the documentation but I’ve read it a long time ago and just forgot about it.
My understanding was that liveview takes control over nodes that can be updated - when something does not have any variables defined in html then It should leave this part of html alone.
Should this be better documented for people starting with liveview or going back after some time?
Maybe a comment in the app.js or layout file where I would need to go to add the tags.

2

I think this is the issue here. Even if LV might do this based on its implementation, the mental model should be that LV makes sure the DOM looks exactly like the html it rendered from its templates. So wherever you want LV to have a different behaviour you need to tell it – using the phx-update attribute.

1 Like