Function not being called on button click

learning123

Hi all!

So, in my component I pass a show_driver_avail_info? prop like so:

 prop show_driver_avail_info?, :boolean

And I have this button:

<button type="button" class="rev-Button rev-Button--secondary rev-Button--tiny" phx-click="show_driver_availability_info">See Driver Availability Info</button>

That has this click function:

  def handle_event("show_driver_availability_info", _, socket) do
    IO.puts("show_driver_availability_info being called")
    IO.inspect(socket.assigns.show_driver_avail_info?)
    socket = assign(socket, :show_driver_avail_info?, true)
    {:noreply, socket}
  end

And I have these components, each of which are rendered if show_driver_avail_info is true, and which take in a truck_load and pass it through various other functions to get the info rendered correctly:

<CardInfo :if={{ @show_driver_avail_info? }} label="Time Since Available" title={{ get_time_since_available(@truck_load) }}  small />
<CardInfo :if={{ @show_driver_avail_info? }} label="Current Status" title={{ get_driver_current_status(@truck_load) }} small />
<CardInfo :if={{ @show_driver_avail_info? }} label="Time Until Cycle Reset" title={{ get_time_until_cycle_reset(@truck_load) }} small />

I assign the show_driver_avail_info? prop like so in the template file:

<%= live_component @socket, TSSWeb.DispatchHomeLive.Kanban.Column.Component, truck_loads: [], orders: @scheduled, well: @well, show_driver_avail_info?: @show_driver_avail_info? %>

My issue is that whenever I click the button, I can’t see my IO.inspect, and I get this error:

[error] GenServer #PID<0.1218.0> terminating
** (UndefinedFunctionError) function TSSWeb.DispatchHomeLive.handle_event/3 is undefined or private

I am pretty certain I am defining the function in the correct file, so I’m not sure why it’s coming back as undefined or private.

I really appreciate any help!! Thanks

17 comments

/phoenix #ecto #testing #troubleshooting #learning-elixir #liveview #surface

0 3364 17

2021-05-10 14:45:21 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

f0rest8

Going by the error you’re receiving, it could either by a typo in your handle_event/3 function name (name mismatch between your .leex and .ex files).

Another possibility, might be that you are not defining your handle_event/3 function in the correct file. For instance, is it defined in your index.ex file or your component file? My initial guess is that it is trying to look in your index.ex file or equivalent and is not finding the handle_event/3 function because it has been defined in your component (when the actual click of the button occurs in your index.ex).

So, I would check where your button click occurs and check that you have defined your handle_event/3 function there and that there aren’t any typos. Typically, the error messages are spot on.

Post #1

sfusato

Try adding the phx-target to your button:

<button 
  type="button" 
  class="rev-Button rev-Button--secondary rev-Button--tiny" 
  phx-click="show_driver_availability_info" 
  phx-target={{ @myself }}
>See Driver Availability Info</button>

But, since this looks like a Surface component, you could do this instead:

<button 
  type="button" 
  class="rev-Button rev-Button--secondary rev-Button--tiny" 
  :on-click="show_driver_availability_info" 
>See Driver Availability Info</button>

And Surface will add the target for yourself.

Without a target, events will reach the main liveview, which is what the error message said. See Targeting Component Events in the LiveView docs & Events section in Surface docs.

Post #2

learning123

hmmm I tried both of these and it’s still giving the same error: [error] GenServer #PID<0.1218.0> terminating ** (UndefinedFunctionError) function TSSWeb.DispatchHomeLive.handle_event/3 is undefined or private

Post #3

learning123

I checked for typos and everything looks right, and the handle_event/3 function is in the file where the button click occurs so I’m not really sure why I’m still getting the [error] GenServer #PID<0.1218.0> terminating ** (UndefinedFunctionError) function TSSWeb.DispatchHomeLive.handle_event/3 is undefined or private error…

Post #4

Nicd

Please show your TSSWeb.DispatchHomeLive module code.

Post #5

APB9785

Creator of ECSx

The full error output should also say what arguments were passed to handle_event/3 - can you post that also?

Post #6

learning123

sure thing, here it is:

[error] GenServer #PID<0.1837.0> terminating
** (UndefinedFunctionError) function TSSWeb.DispatchHomeLive.handle_event/3 is undefined or private
    (tss 0.0.1) TSSWeb.DispatchHomeLive.handle_event("show_driver_availability_info", %{"value" => ""}, #Phoenix.LiveView.Socket<assigns: %{__context__: %{}, __surface__: %{}, breadcrumb_trail: [[name: "Home", url: "/"], [name: "Wells", url: "/wells_board"], [name: "Dispatch Board - Argent Barksdale East 29-17 4LS/4WA/6LS/6WA/7LS/7WA", ...]], connected?: true, current_user: %TSS.User{location_services_network: true, device_token_type: "fcm", ...}, flash: %{}, forecast_data: %{...}, ...}, changed: %{}, endpoint: TSSWeb.Endpoint, id: "phx-FnzYcT9D2WJMWSYj", parent_pid: nil, root_pid: #PID<0.1837.0>, router: TSSWeb.Router, view: TSSWeb.DispatchHomeLive, ...>)
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/channel.ex:338: anonymous fn/3 in Phoenix.LiveView.Channel.view_handle_event/3
    (telemetry 0.4.2) /Users/amber/Desktop/TSS/TSS/web/deps/telemetry/src/telemetry.erl:262: :telemetry.span/3
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/channel.ex:203: Phoenix.LiveView.Channel.handle_info/2
    (stdlib 3.14.1) gen_server.erl:689: :gen_server.try_dispatch/4
    (stdlib 3.14.1) gen_server.erl:765: :gen_server.handle_msg/6
    (stdlib 3.14.1) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
Last message: %Phoenix.Socket.Message{event: "event", join_ref: "4", payload: %{"event" => "show_driver_availability_info", "type" => "click", "value" => %{"value" => ""}}, ref: "8", topic: "lv:phx-FnzYcT9D2WJMWSYj"}
[error] GenServer #PID<0.1882.0> terminating

Post #7

APB9785

Creator of ECSx

Usually when this issue comes up for me, it’s because of the targeting, like @sfusato was mentioning earlier. I haven’t used Surface, but for a Live Component, adding phx-target="<%= @myself %>" seems like it should resolve the issue if your handle_event/3 is in the same file.

Post #8

learning123

This is the error I’m getting after adding that target in

Post #9

APB9785

Creator of ECSx

Is the name of your component DispatchHomeLive? You can see in the error message that the app is looking for the handle_event there. So if that’s not the component, then the problem is with the phx-target. My guess is there is something we are not seeing because you are only posting snippets. If you could post a full repo where the issue was happening, it would be easier to troubleshoot.

Post #10

Load more posts (7 remaining)