Javascript hook expects handle_event in all live views

Phoenix Forum Questions / Help
, , ,
1

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://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?

1 Like
2

I’ve the same error, do you resolved it ?

1 Like
3

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
3 Likes