fteschke
I use this pattern to handle user input before JS has loaded / hooks have mounted:
<button onclick="this.$clicked = true" phx-hook="MyHook" phx-click={JS.dispatch('clicked')} />
// my_hook.js
mounted() {
this.el.addEventListener('clicked', () => { ... })
if (this.el.$clicked) {
this.js().exec(this.el.getAttribute('phx-click'))
}
}
This works quite well. But I would prefer a global solution rather than extending each relevant hook.
Ideally:
// app.js
document.querySelectorAll('[onclick="this.$clicked = true]').forEach(el => {
if (el.$clicked) {
window.liveSocket.execJS(el, el.getAttribute('phx-click'))
}
})
However, there is a timing problem.
If phx-click dispatches an event that the hook needs to handle, the hook must have been mounted (attached it’s event listener) first.
So I want to delay my app.js code until all hooks have been mounted.
Is there any way to do this (I was hoping for a phx:all-hooks-mounted event)?
Or is there an entirely different approach to achieving this?
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ai
- #ecto-query
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #metaprogramming
- #hex
Our Sponsors
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
**Building the future of software with AI, trust, and human connection.**
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
First Post!- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
LostKobrakai
You could probably do
phx-mounted={JS.dispatch("maybe-clicked")}Most Liked
fteschke
Agreed, disabling the interactive elements would work. Best without any visual style changes (suppress any button ‘disabled’ styles) to avoid flickering on page load.
Similar line of thought: Optimize page load times (small JS bundle, chunk splitting, …, check caching).
Even so, if any one has thoughts in case above is not enough, please let me know.
fteschke
I want to handle click events that occurred before the JS bundle loaded.
Such events may be handled by JS hooks.
For the event to be properly handled, the respective hook may have to be mounted and have registered its event listeners.
So before I can “retry” the
phx-clickhandler for each element that was early clicked, I need to make sure that any hook that may be listening to events dispatched from thatphx-clickhas been mounted.I can solve this problem per element/hook by knowing which elements and hooks are related.
But I would rather have a global solution that doesn’t require this level of knowledge. In that case I think the easiest solution is to wait until all hooks have mounted before “retrying” the
phx-clickhandlers.