I have a component for pagination. It works but there's one issue: it won't replace or update the URL in the browser dynamically. Namely, when I change a page -- 2nd, 3rd, 4th page of the data in a table -- I want the URL to get updated as well: updated in the browser URL bar and appended to the browser history.
my_domain.com/my/pigs?page=2&page_size=5
my_domain.com/my/pigs?page=3&page_size=5
my_domain.com/my/pigs?page=66&page_size=5
But at the moment only data will get fetched correctly, according to the current page, whereas the URL will remain always static - my_domain.com/my/pigs
@impl true
def handle_info({:update, opts}, socket) do
extra_params = merge_and_sanitize_params(socket, opts)
path = "/my/pigs"
to = path <> "?" <> URI.encode_query(extra_params)
# socket = push_patch(socket, to: to, replace: true)
socket = push_patch(socket, to: to)
{:noreply, socket}
end
I've tried replace
with true
, and without -- the URL will stay "my/pigs" no matter what.
The _url
in handle_params(..)
will contain the correct one -- with ?page=X&page_size=Y
which is correct:
@impl true
def handle_params(params, _url, socket) do
# _url will contain dynamic url, with the correct params
# .....
However, the the URL in browser the will still remain static.
What's the matter?
Here's a part of my pagination component
<div class="page-stepper">
<%= for {page_number, current_page?} <- pages(@pagination) do %>
<div phx-click="show_page"
phx-value-page={page_number}
phx-target={@myself}
class={if current_page?, do: "active"}
><%= page_number %></div>
<% end %>
</div>
And
# ...........
def handle_event("show_page", params, socket) do
# ..........
# opts ---> page, page_size
#
send(self(), {:update, opts})
{:noreply, socket}
# ........
https://github.com/phoenixframework/phoenix_html/issues/417
According to this GitHub issue it might be your phoenix_html
version.
You should probably downgrade phoenix_html
to 3.2 or upgrade phoenix_live_view
to latest version.
We just ran into the same issue recently.