Emit Event from LiveComponent to another LiveComponent not working

Hallo everyone,

here is my second problem:

I have a container that renders conditionally a dropdown menu. The workflow looks like this:

button_clicked = true: DisciplineContainer – render --> Dropdown

Now when I click on the close button of the Dropdown menu I want to emit a event to change the button_clicked boolean back to false. So basically:

Dropdown Close clicked --> emit event: button_clicked = false --> DisciplineContainer

I load the Discipline Container like that from another template:

<%= live_component @socket, ExampleWeb.IndexSearch.DisciplineContainerComponent, id: "discipline-container-1"%>

And I emit the button click in the Dropdown Menu like this:

<div phx-click="close-dialog" phx-target="#discipline-container-1">

The event handler for the Discipline Container looks like this:

defmodule ExampleWeb.IndexSearch.DisciplineContainerComponent do
  use ExampleWeb, :live_component

  def mount(socket) do
    socket =
      assign(socket,
        selected_discipline: "",
        dropdown_clicked?: false
      )

    {:ok, socket}
  end

  def handle_event("close_dialog", params, socket) do
    IO.inspect(params)

    {:noreply, socket}
  end
end

Unfortunately the event isn’t triggered…

I’ve read the documentation but I’m not sure what I’m doing wrong.

I really appreciate your help :slight_smile:

Do you have a

<div id="discipline-container-1">

when rendering the discipline container.

Hey thanks for your reply! I was indeed able to solve my problem. You were right :slight_smile: I thought that it’s enough to declare an id in the Live Component function where I invoke the component.

1 Like