sjolicoeur

sjolicoeur

Rendering liveview inside another liveview with live_render generates a not_mounted_at_router error

Hello,

full disclosure I am still very new to elixir and phoenix and liveview.

I am trying to transform a liveview controller and it’s. *.leex template into a component. The controller was auto generated with mix phx.gen.live and I am trying to turn the :show controller into a re-usable component that can be embedded in other views.

The first of which was to insert it into page_live.html.leex which according to the docs should work when

<%# live_render(@socket, ChatDemo.ChatRoomLive.Show, id: "ChatWindow", session: %{"id" => "07593216-b033-40e1-8c03-f32aa7375dec"} ) %>

But I get a no match of right hand side value: :not_mounted_at_router and somehow the debug page doesn’t show the expected content for session. I know it does require an :id in the params.

the controller works as a standalone, but not when rendered in another *.leex, is it possible to write a mount function that will work with live_render ? What am I doing wrong? or miss understanding?

the router entry:

  scope "/", DemoWeb do
    pipe_through [:browser, :admin_view]
    live "/message/:id", MessageLive.Show, :show
    live "/message/:id/show/edit", MessageLive.Show, :edit
  end

the liveview render call

<%= live_render(@socket, DemoWeb.ChatRoomLive.Show, id: "ChatWindow", session:  %{"id" => "07593216-b033-40e1-8c03-f32aa7375dec"} ) %>

the code seems to fail here

@impl true
  def mount(params, session, socket) do
    %{"id" => id} = params # FAILS HERE, but session only contains the csrf token
    if connected?(socket), do: Chat.subscribe()
    messages = Chat.list_message_for_chat_room(id)
    {:ok, socket
          |> assign(:messages, messages)
          |> assign(:message, %DemoWeb.Chat.Message{})
    }
  end

Marked As Solved

APB9785

APB9785

Creator of ECSx

From Phoenix.LiveComponent - Targeting Component Events:

If you want to send the event to yourself, you can simply use the @myself assign, which is an internal unique reference to the component instance

Note @myself is not set for stateless components, as they cannot receive events.

So yes, @myself is specific to stateful components.

As for handle_params/3, this function is not for LiveComponents to handle events, it is for the parent LiveView to handle URL parameters. LiveComponent events are handled with handle_event/3 - either in the LiveView (if the component is stateless), or in the component itself (if the component is stateful AND the event has phx-target="<%= @myself %>")

Looking through the mount/3 function in the OP, I think there is also a lack of context here that might make it difficult to troubleshoot this issue. You’re talking about a LiveComponent, but mount/3 is the mount for LiveViews (components use mount/1). If you’re still having trouble, please share the full repository so we can see how the LC is interacting with the parent LV.

Where Next?

Popular in Questions Top

sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
Tee
can someone please explain to me how Enum.reduce works with maps
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
earth10
Hi, I’m just starting to build a side-project with Elixir and Phoenix and doing some basic test with Elixir alone. What strikes me is th...
New
LegitStack
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

Other popular topics Top

malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39297 209
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New

We're in Beta

About us Mission Statement