learning123

Function not being called on button click

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

8 2999 17

2021-05-10 14:45:21 UTC

Most Liked

msaraiva

Broadway Core Team

The component doesn’t show up because @show_driver_avail_info? is still a boolean and its value is either false (on initialization) or true (after clicking), never the string "true". Pay attention that you can keep the assign as a boolean as long as you treat the received values in the event handler as strings. Liveview only accepts string values as event parameters. You cannot send boolean nor integer values to events. They’ll always be converted into strings so just handle them as such in the handle_event. The rule is simple:

Event params come from the browser so they are always serialized as strings.
Socket assigns are kept in the server so their values are exactly the same thing you set them to be, e.g. integer, boolean, map, list, etc.

Post #18

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 #2

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 #3