Liveview component not reponding

Phoenix Forum Questions / Help
,
1

I have a liveview form

<tbody>
      <%= for e <- @entries do %>
      <%= live_component(JotWeb.Component.EntryDate, id: e.tmp_id, entry: e, all_units: @all_units)  %>
      <% end %>
</tbody>

inside the component i have th TD with a form inside

<tr class={@entry.css_class}>
<.form
let={f}
for={@cs}
id="entry-{@entry.tmp_id}"
phx-target={@myself}
phx-change="validate"
phx-submit="save"
>
  <td><%= text_input f, :remarks, class: "form-control" %></td>

I have the event_handling

...
use JotWeb, :live_component
...
@impl true
  def handle_event("validate", params, socket) do
    IO.inspect(params, label: "validate")
    {:noreply, socket}
  end

The problem is that what I’m entering value to remarks I am getting no event

when I am adding the same code instead of the component it is working fine

any idea?

2

Could it be because of this line which creates duplicated ID’s in the DOM? It should be:
id={"entry-#{@entry.tmp_id}"}

3

I did that but with no luck

4

Did you enable liveview debug (liveSocket.enableDebug()) and check your browser’s console for any error messages? This is intriguing especially since you say that if you just take the component’s code and move it into the liveview everything works as expected.

5

You can’t put a form directly inside a tr, it’s not valid HTML. The browser will likely move the form outside the table, breaking the event.

6

I will try to move to to a

7

It gave me an error “Duplicate ID”, I will look for it
Thanks

8

This is the problem. Thanks
I changed it to