fteschke
Handle user input before hooks mounted
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?
First Post!
LostKobrakai
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-click handler for each element that was early clicked, I need to make sure that any hook that may be listening to events dispatched from that phx-click has 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-click handlers.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
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.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"