I have a LiveView for an Event that uses multiple components to collect parameters for creating and updating an Event.
Each component has a form that collects a subset of the Event’s params.
Each component “sends” its params back up to the parent LiveView
the Parent Liveview merges all of the params together and then validates and processes them
The issue is that a component won’t send params until a user makes a change which triggers an event. But I need ALL of the components to send their initial state of params BEFORE the user makes any changes.
Yes … I could parse these params out of the %Event{} that is passed around to each component, but I feel like there must be a way to trigger the forms to send an event (where I could grab the params) when the form is first mounted.
In essence … I need to do a roll-call with all of my components and make them tell me the status of their params before ANY changes are made.
I saw phx-mounted and thought that maybe I could use that, but i don’t know JavaScript.
Is it possible to use phx-mounted to throw an event with all of the current params in a component’s form? If so, could someone send me the code that I would use? Here is the code from the hex docs:
Sadly … this did not work. I tried every combination of phx-mounted (as a div, inside <.form>, inside the html tags) and everything failed. I was never able to get it to successfully push an event. I even tried it in the LiveView (instead of a component) and nothing happened. I tried to find more examples of how phx-mounted is used, but there is very little on it. So I’m abandoning this approach. Just posting this in case someone else tries to go down this path. If you get phx-mounted to work … I’d love to see your code!
Sorry my fault.
You need to use phx-connected instead of phx-mounted since the underlying websocket connection isn’t yet established on mount.
This minimal example works for me:
defmodule PhxWeb.MountedLive do
use PhxWeb, :live_view
def mount(_, socket) do
{:ok, socket}
end
def render(assigns) do
~H"""
<h1 phx-connected={JS.push("header_mounted", value: %{state: "Some state"})}>Hello, World!</h1>
"""
end
def handle_event("header_mounted", value, socket) do
IO.inspect(value) # Prints %{"state" => "Some state"}
{:noreply, socket}
end
end