peter-de-boer
Javascript hook expects handle_event in all live views
I have implemented a Javascript hook for calculating the screen width and height as I need that info in one of my live views. I have basically used some code from this topic: https://forum.elixirforum.com/t/liveview-sending-more-data-than-expected/36259. So I have an event listener which pushes an event whenever the window is resized. This is handled by an appropriate handle_event in the liveivew that needs it.
The problem is that my application contains more than one liveview. Now when I navigate to a different live view, I get an error message like ** (FunctionClauseError) no function clause matching in BwWeb.StoreLive.handle_event/3.
So, am I supposed to implement an handle_event for this javascript event in every live view in my application, i.e. also in the ones that do not need that info? Or is there a more clever way to solve this?
Most Liked
mcrumm
You can use server lifecycle hooks to attach a shared handle_event on each LiveView. You can use the on_mount macro or the :on_mount option on the live_session router macro to reduce even more duplication:
#router.ex
live_session :default, on_mount: [MyAppWeb.SharedEvents] do
# routes...
end
# shared_events.ex
defmodule MyAppWeb.SharedEvents to
@moduledoc "Event handlers shared on all LiveView modules"
use Phoenix.Component
def on_mount(:default, _params, _session, socket) do
socket = attach_hook(socket, :resize, :handle_event, &handle_event/3)
{:cont, socket}
end
def handle_event("resize", _params, socket) do
# handle the resize
{:cont, socket}
end
end
alexl
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.
Develop your skills with books, videos, and courses.
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!"