I started getting duplicate form elements on DOM updates with leex markup like below and I fixed it by changing hidden input’s name
attribute from id
to player_id
. What I mean is that I clicked New card
button and new form element would added to DOM (a duplicate) for some player rows. I also added id
attribute for form and didn’t help and there where multiple forms with same id. Does input with name
attribute with value of id
have some sort of special meaning in LiveView and is it documented somewhere?
While writing this found similar post from this forum without any replies LiveView has a problem with input name id
<%= for player <- @players do %>
<tr style="<%= if player.id == @selected_player_id, do: "background-color: lightgreen;", else: "" %>">
<td><button id="save_selected-player-<%= player.id %>" class="button is-small is-success" phx-click="select_player" phx-value-id="<%= player.id %>" phx-hook="SaveSelectedPlayerId">Select</button></td>
<td><%= player.name %></td>
<td>
<form phx-change="change_player_edge">
<input name="id" type="hidden" value="<%= player.id %>" />
<div class="select is-small">
<select name="edge">
<option value=""></option>
<option value="hesitant" <%= if player.edge == :hesitant, do: "selected", else: "" %>>Hesitant</option>
<option value="quick" <%= if player.edge == :quick, do: "selected", else: "" %>>Quick</option>
<option value="level_headed" <%= if player.edge == :level_headed, do: "selected", else: "" %>>Level Headed</option>
<option value="imp_level_headed" <%= if player.edge == :imp_level_headed, do: "selected", else: "" %>>Imp. Level Headed</option>
<option value="quick_and_level_headed" <%= if player.edge == :quick_and_level_headed, do: "selected", else: "" %>>Quick + Level Headed</option>
<option value="quick_and_imp_level_headed" <%= if player.edge == :quick_and_imp_level_headed, do: "selected", else: "" %>>Quick + Imp. Level Headed</option>
</select>
</div>
</form>
</td>
<td>
<% card = get_card_for_player(player) %>
<%= case card do %>
<% nil -> %>
<% %{suit: nil} -> %>
<span>Joker</span>
<% %{suit: :spades} -> %>
<span><%= format_card(card) %> </span><img src="<%= Routes.static_path(@socket, "/images/cards/spades.svg") %>" style="width:11px" />
<% %{suit: :hearts} -> %>
<span><%= format_card(card) %> </span><img src="<%= Routes.static_path(@socket, "/images/cards/hearts.svg") %>" style="width:11px" />
<% %{suit: :diamonds} -> %>
<span><%= format_card(card) %> </span><img src="<%= Routes.static_path(@socket, "/images/cards/diamonds.svg") %>" style="width:11px" />
<% %{suit: :clubs} -> %>
<span><%= format_card(card) %> </span><img src="<%= Routes.static_path(@socket, "/images/cards/clubs.svg") %>" style="width:11px" />
<% end %>
<span style="cursor:pointer"><%= format_more_cards(player.cards) %></span>
</td>
<td><button class="button is-small mr-1" phx-click="add_card_for_player" phx-value-id="<%= player.id %>" data-confirm="Do you really want to give new card for player "<%= player.name %>"?">New card</button><button class="button is-small" phx-click="remove_player" phx-value-id="<%= player.id %>" data-confirm="Do you really want to remove player "<%= player.name %>"?">Remove</button></td>
</tr>
<% end %>```
<%= for player <- @players do %>
<% end %>