elixirphoenix-frameworkphoenix-live-view

"push_patch" won't update URL


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}
    # ........

Solution

  • 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.