LiveView update partial of the data not working properly

Phoenix Forum Questions / Help
1

image
image1378×1192 14 KB

I have a LiveView page like above picture.
I try to click on checklist and using socket = assign(socket, read_list: read_list) to update partial of the page, but the action reset all other radio button selection to default.

How can I update partial data and don’t need to compose all the data for all the lists?

1     def handle_event("is_read",  %{"thisbook" => this_book }, socket) do
  1
  2      ...
  3
  4       socket = assign(socket, books_read_map: read_map)
  5
  6       applied_list = BookController.get_applied_list(applied)
  7       {:noreply, update(socket, :books, fn books -> applied_list end)}
  8     else
  9       {:error, "Wrong"}
 10     end
 11
 12   end
2

You have to manage the state of your assigns in such a way that when it re-renders, the default value is the current value on the assigns. Take into account that on every update to the assigns, it will re-render.

3

What is the better way to do this?
regenerate all data or retrieve from session in LiveView(not sure how to do it)?

4

When filtering a collection (like your example seems to suggest) I like to make use of query parameters, since this way the link is also shareable. Depending of the context, this might be a desirable feature most of the time.

This means that your handle_event("form_phx_change_action") callback will do a push_patch and you will retrieve the params in handle_params callback and use that to set the form’s state.

5

I don’t really understand the problem, but you can try make each button a live_component, so each one of them updates itself. And do the updates individually because based on your code you are querying the whole dataset every time.

6

Yeah, I will try live_component.
Currently the data comes from both Ecto/Postgres and Riak, so don’t want to create a wrapper for both of them, as these two sets of data not tightly coupled.

7

Do you have a simple code the demo this? :slight_smile:

8

Sure.

Demo: https://live-view-collection.herokuapp.com - this way you can also browse other open source liveview projects :smiley:

Check the corresponding collection_live.ex file source code.

Notice:

  • handle_params callback
  • handle_event("search") callback
  • redirect_attrs/2 helper function

As far as I can tell, the filtering is done for the search query, page number and number of per page entries.

For a 2nd example (of opaque filtering this time, thus not using the url query params), check The Pragmatic Studio episode on Filtering

1 Like
9

Many thanks, this is what exactly I need :slight_smile: