I have an @card, which has an image value which I leave printed on src = “”, but every time I do an action with @card ( for exemple i have a event to move a card).
def handle_event(
"move_card",
%{
"data" => %{
"card_id" => id,
"to_list" => lis_id,
"to_position" => pos
}
} = params,
socket
) do
card =
Admin.get_card!(id)
Admin.update_card(card, %{list_id: list_id, position: pos, new: false})
{:noreply,
assign(socket,
cards: current_lists(socket),
)}
end
it renders the image inside card again. Is there any way to get my @card.img to be rendered only once, so that it doesn’t accumulate memory every time I do an action?
Can you share your template? Do you have DOM ids on the containers that you are moving around?
1 Like
Around my cardcomponent i have a DOM that has ID
<% dom_id_list = "list" <> Integer.to_string(@list.id) %>
<div class="list_cards" id="<%= dom_id_list %>" data-list-id="<%= @list.id %>" phx-update="append">
<%= for card <- @cards do %>
<%= live_component(@socket, MyAppWeb.CardComponent, id: "card_" <> card.id, user_id: @user_id, card: card, list_id: card.lista_id, type_tags: @type_tags) %>
<% end %>
</div>
inside my card component i have another ID id= "unit _ <% = @ card.id%>"
around the content
<% dom_id_card = "unit_" <> Integer.to_string(@card.id) %>
<div phx-value-card_id= "<%= @card.id %>" class="card_<%= if @card.new == true, do: "contacts toast_format_new", else: "contacts"%>" id="<%= dom_id_card %>" data-card-id="<%= @card.id %>" data-list-id="<%= @list_id %>" data-user-id="<%= @user_id %> ">
<%= live_component(@socket, MyAppWeb.DisplayedTagsComponent, id: "lists_tags"<>@card.tag_collection_id, card: @card, type_tags: @type_tags) %>
<div phx-click="open_modal" class="open_info" phx-value-data_modal_id="<%= @card.contact_id %>" data-modal-id=" <%= @card.contact_id %>">
<p phx-value-card_id="<%= @card.id %>" class="name_field"><%= if @card.title == nil, do: "Unknown", else: @card.title %>
</p>
<%= live_avatar(@card.img, @card.id) %>
</div>
</div>
and my LiveHelpers module
def live_avatar(url, card) do
raw("""
<div id="#{card}_field_avatar" phx-update="ignore">
<img class="img_field" id="#{card}_tumbnail" src="#{url}"></img>
</div>
""")
end
My move_card event is interacting with all this content
When you say renders again, I assume you are talking about the browser refetcihng the image? Or are you talking about the server?
In this context it would be the browser refetching, but I believe it is impossible to cancel this refetching repetition, because everything is ok by the server. I imagined that LiveView would have an action on that