Removing element from DOM in LiveView

Phoenix Forum Questions / Help
,
1

Good Day!
Where I can find simple examples or tutorials.
Where will be example removing element from DOM in LiveView.

2

Which element are you trying to remove and when?

1 Like
3

I want to create handle_event.
Which will delete element from db.
And then remove element on page.

  def handle_event("delete", %{"id" => id}, socket) do
    with post <- Content.get_post!(id),
         {:noreply, _post} <- Content.delete_post(post) do
      {:noreply, socket |> put_flash(:info, "Post was deleted!") |> I think some thing must be here}
    else
      _ -> {:noreply, socket |> put_flash(:error, "Post was not deleted!")}
    end
  end

I can fetch all content from db repeatly after removed post.
But i think it’s wrong.
I also have InfiniteScroll. And if I upload a lot of data by scrolling and will delete one element from last upload. And in live component will be fetch all content after delete. A strange situation is happening, it will upload data by scroll functionality everytime until it gets to the place where the element was deleted.

1 Like
4

To show an update to the DOM, you need to elaborate a handle_info for this process.

For example

  def handle_info({Admin, [:card_tag| _], _}, socket) do
    {:noreply, assign(socket, cards_tags: Selects.tags_preload())}
  end

This function expects create, update and delete events. In my context, I can create, edit or delete a tag that is associated with a card.

1 Like
5

Sorry, I don’t fully understand. In your’s example I understood what I should look to Phoenix.PubSub.
But most likely I put the question incorrectly.

Example:

<%= for card <- @cards do %>
  <%= live_component @socket, CardComponent, card: card, id: card.id, board_id: @id %>
<% end %>

Who can I remove one component CardComponent of list in DOM.
Without re-rendered parent?

6

You have to re-render the parent. The only away to remove something is to render its parent/container without it. :slight_smile:

8 Likes
7

Thanks! It’s helped me to understanding and done.

To make InfiniteScroll work correctly, after remove component from list. In every upload after scrolling for each element I add per_page and page, beside id. Then after click, in “handle_event” sending params id, per_page and page.
Then recalculating data which I need to load from db at once without taking into scrolling and without deleted element.

1 Like
8

Piggybacking on this thread… is there some way to maintain the assigns of a child component across re-renders?

In my use-case, CardComponents have an is_hidden flag which shows/hides a list of comments. The parent defaults this flag to true (so Card comments are hidden by default), and users can then press a button to toggle is_hidden from true to false.

The issue I’m having is that, because I’m using pub-sub, if one user deletes a card it triggers a re-render of the parent which then hides all the comments for every subscriber (and also blows away any comments they were in the middle of writing).

9

Please don’t use Live View to manipulate hiding or showing parts of the DOM, unless you need to apply business logic to that action. While Live View can do it it’s very bad for the user experience in poor network connections, like in public transports. Remember that in your computer things work seamless because you are in a localhost, or very nearby the datacenter and/or with a good network connection, but this will not be the case in the real world for the users of your app. Try to use your app in some public transports to see what I mean :wink:

2 Likes
10

Please don’t use Live View to manipulate hiding or showing parts of the DOM

That’s a good point. I thought I would be okay because I’m only using LiveView to toggle a class on and off but didn’t realize that it would still have to send the classname over the network.

I guess I’ll have to stop avoiding that app.js file >.<

1 Like
11

I am building a production app and I also started like you, using Live View for any DOM change, but once I commute by train with a very bad network signal I quickly realized that I should keep Live View for places where I need to manipulated data and apply business logic, and don’t want to duplicated that logic in the front-end and back-end.

1 Like
12

Or use latency simulation

13

Will never show you what the Real World experience will give you, never… At the best will give you a taste.

In the real world network goes and comes back in very weird and unpredictable manner, you cannot simulate it, just try to :wink:

1 Like