Function not being called on button click

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.

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.

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

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…

Please show your TSSWeb.DispatchHomeLive module code.

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

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

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.

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

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.