liveSocket.connect misses with the page layout

When I remove the line liveSocket.connect() the masonry js library works fine, but when I keep it, there are layout problems

this is inside the index.html.heex file:

<script type="text/javascript" src={Routes.static_path(@socket, "/assets/masonry.pkgd.min.js")}></script>


 document.addEventListener("DOMContentLoaded", () => {
     var elem = document.querySelector('.grid');
     var msnry = new Masonry( elem, {
	 originLeft: false,
	 itemSelector: '.grid-item',
	 columnWidth: 200

When I run liveSocket.connect() either manually or from app.js some of the style attributes are removed from the elements.

It seems like a matter of order, the sequence should be liveSocket.connect() then new Masonry(...)
new Masonry(...) then liveSocket.connect()

@alsaraha this question is a bit light on details but you’re probably going to need to read up on Hooks, especially the need to use phx-update="ignore" on elements that are going to be modified by some of your JS.

1 Like

Your reply is helpful though not the answer. I can listen to “phx:update” event and reinitialize the library, but still I am looking for event like “phx:mount”

Have a look at hooks: JavaScript interoperability — Phoenix LiveView v0.17.11 that should allow you to initialize the library on the right moment.

1 Like

Can you provide more information about how you’re masonry js?

1 Like

Informative but it seems like mounted() is executed before liveSocket.connect() too

I have provided more information above.
Masonry js is at Masonry · Layout

You might have more luck if you work with the framework. If you’re changing the DOM outside of liveview, you need to tell liveview to ignore that part with phx-update="ignore" (not what you’re talking about with listening to events).

You might have some success by leaving liveSocket.connect() alone, getting rid of that event listener and creating a hook for Masonry (based on the event listener).