Calling some JS code upon a LiveView update?

idi527 · June 11, 2019, 5:35pm

It’s also possible to listen for "phx:update" events which are (at least to my knowledge) emitted when the DOM is done being patched.

github.com/phoenixframework/phoenix_live_view

LiveView interfering with custom js

opened 04:45PM - 17 Mar 19 UTC

closed 02:46AM - 18 Mar 19 UTC

jamilabreu

### Expected behavior Any custom javascript should execute either after LiveVie…w loads, or maybe have an observable event similar to Turbolinks: ``` document.addEventListener("turbolinks:load", function() { // ... }) ``` ### Actual behavior I'm seeing that LiveView often interferes with my custom js, but adding a delay fixes things. In my case using Stimulus: ``` import { Controller } from "stimulus"; export default class extends Controller { static targets = ["element"]; connect() { const element = this.elementTarget; // THIS DOESN'T EXECUTE if (element.clientHeight < element.scrollHeight) { // Do something that modifies the DOM } // THIS DOES setTimeout(() => { if (element.clientHeight < element.scrollHeight) { // Do same thing } }, 200); } } ```

I used it in some of my “experiments” with client side js libs (similarly to LiveView: How to trigger JS function? (Update chart.js on data change)) to create/destroy/recreate their objects when the DOM elements they were “bound” to got “morphdomed”.