Questions & Help>Questions

Javascript hook expects handle_event in all live views

/phoenix#javascript#event#liveview
peter-de-boer

peter-de-boer

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?

2 comments
/phoenix#javascript#event#liveview
1317 2

Showing Posts 1 to 2

alexl

alexl

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

1
Post #1
mcrumm

mcrumm

Phoenix Core Team

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
6
Post #2
— All posts loaded —

Where Next? Top

View thread on forum (has 2 replies!)
phoenix
javascript
event
liveview
Home Questions & Help>Questions
8 1296 2
Last post
REPLY VIEW THREAD WITH 2 POSTS

Trending in Questions Top

Blokh
Questions & Help>Questions

Huge CSV processing that needs to be processed hourly - any tips?
Hey guys, I’ve got a huge CSV ( around 10 GB ) that needs to be processed hourly Do you guys have any suggestions what is the best prac...
/phoenix
10 1191 5
New
kszambelanczyk
Questions & Help>Questions

Delete file on S3 with Waffle
Hello! Could someone please give me a help/sample code, how to delete a file from s3 using waffle/waffle_ecto from Phoenix app. I creat...
/phoenix#waffle#waffle-ecto
1 695 1
New
Onor.io
Questions & Help>Questions

How To Create A Select Control From A Lookup Table?
I have what I’ve heard referred to as a “lookup table” in my database. This is a way of assigning codes to common values. One common lo...
/phoenix
3 243 5
New
jaybe78
Questions & Help>Questions

How to sync chats after dropped or broken connections in an online chat system?
Hello, I’m developing a online persistent chat system (what’s app) like using elixir/dynamodb/aws for a mobile app(flutter). The diffic...
#ets#troubleshooting#learning-elixir#chat#dynamodb
0 311 6
New
Trolleger
Questions & Help>Questions

Proper way to send channel events to multiple different people for live updates?
What approach to take when sending live updates to “random” users Hi! I have a question, I have a little chat app, and when I create a DM...
/phoenix#channels
2 689 2
New
matt-savvy
Questions & Help>Questions

Honeybadger and Bandit, Phoenix, Plug errors
Anyone here using Honeybadger? My Honeybadger account is being overwhelmed with noise from some bots. Seeing a lot of Bandit.HTTPError...
/phoenix#bandit
1 222 2
New
RemyXRenard
Questions & Help>Questions

Livebook DataTable displaying charlist as list
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
/livebook#charlist
2 325 3
New

Other Trending Topics Top

garrison
News>Announcing

Hobbes - a low-level distributed database for the Elixir programming language
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
#library#database#distributed#hobbes
302 4824 87
New
mcass19
News>Announcing

ExRatatui - Elixir bindings for the Rust ratatui terminal UI library
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
#library#rust#terminal#tui
58 2534 15
New
Damirados
News>Announcing

Emerge & Solve - a GUI framework for Elixir
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
/nerves#library#frameworks#gui#native#state
59 2300 23
New
netoum
News>Announcing

Corex - Accessible and unstyled UI Phoenix components
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
/phoenix#library#ui#liveview#hooks#accessibility#component#tableau
61 2202 19
New
wintermeyer
News>Announcing

Vutuv.de - an open-source LinkedIn alternative built in Phoenix
There are three potential reasons for members of this forum to have a look at https://vutuv.de You are tired or annoyed of LinkedIn. Yo...
/phoenix#fediverse#project
76 1722 40
New
webofbits
News>Announcing

Aludel - LLM prompt evaluation workbench
Aludel - LLM Evaluation Workbench Aludel is an embeddable Phoenix LiveView dashboard for evaluating and comparing LLM prompts across mult...
/phoenix#library#liveview#ai
27 1761 40
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Questions & Help>Questions

Questions Questions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Coders51

We build reliable cloud platforms for business-critical systems.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking, logs, uptime, and Just Enough APM. Built for developers.

Manning

Master modern tools, write cleaner code, and tackle real-world challenges.

WyeWorks

Enabling companies to succeed by building software people love.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking, logs, uptime, and Just Enough APM. Built for developers.

Manning

Master modern tools, write cleaner code, and tackle real-world challenges.

WyeWorks

Enabling companies to succeed by building software people love.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews