Javascript callback when page has changed

Dash Python
1

Hello,

I am adding a threejs visualizer to a dash app, and for that I need to detect when the page is updated and all DOM elements added to it. The vanilla javascript way would be to use document.addEventListener("DOMContentLoaded", ()=>{}), but at the moment, when DOMContentLoaded is triggered, plotly has not added its DOM elements yet. Alternatively, in a vuejs app, I would use onMounted hooks.

So for now, I’ve been using a combination of click events, timeouts and MutationObservers to try and work around this, but that still remained inconsistent. This leads me to think that there might be lifecycle events for when a page is mounted/unmounted, but I haven’t found any documentation about it.

What would you recommend to try to detect when a page is mounted/unmounted? (or added/removed, not entirely sure what vocabulary is used regarding plotly)

2

Unfortunately there aren’t any built in events that we fire when the dom is finished rendering.
In some projects, we’ve relied on some setIntervals that periodically check if the element is there. Otherwise, we try to encapsulate the JS logic into its own react component which has the componentDidMount hooks.

3

Okay, thanks a lot for letting me know. I’ll investigate what our options are.