Please post the actual error message and your router.ex (just the part that includes the route you want to link to).

Hi,
Thank you.

I refactored my page a bit and I am no longer getting the error message.
I needed to have 2 handle_params defined, and both are running every time I click “continue”
The issue now is that my page “1” is not being rendered correctly from page “2” - I am missing parts, it’s not loading correctly.

def handle_params(%{“page” => page}, _, socket) do
Logger.info(“handle params 1”)

page = String.to_integer(page)

case page do
  1 -> 
    socket = assign(socket, page: 1)
    {:noreply, push_patch(socket, to: "/portfolio/add-site")}
  2 ->
    socket = assign(socket, page: 2)
    {:noreply, push_patch(socket, to: "/portfolio/add-site")}
end

end

def handle_params(params, _, socket) do
Logger.info(“handle params 2”)
Logger.info(params)
{:noreply, socket}
end

HTML:

<%= if (@page == 2) do %>
<.live_component module={WB.PortfolioWeb.SiteTypeComponent} id=“1” params={@params} changeset={@changeset} page={@page} type={@type} location={@location_input} coords={@coords}/>
<%= else %>
…
<%= live_patch “Continue”, to: Routes.live_path(@socket, WB.PortfolioWeb.AddSiteLive, page: 2), class: “btn-primary-medium” %>
<% end %>

In the component:
<%= live_patch “Site Type & Location”, to: Routes.live_path(@socket, Web.AddSiteLive, page: 1), class: “” %>

Router.ex:
live(“/portfolio/add-site”, AddSiteLive)

The reason you were getting a no match the first time is that you were only matching when params explicitly has the form %{"page" => page}. When you first hit the page, you wont have any query params set, so params will look like this: %{} and Elixir cant find any function that accepts those arguments.

The error message will say something like

 ** (FunctionClauseError) no function clause matching in ForumFixWeb.AddSiteLive.handle_params/3
        lib/forum_fix_web/live/add_site_live.ex:9: ForumFixWeb.AddSiteLive.handle_params(%{}, "http:/....

Which is cluing you into what params were given (the %{}) and what the error is.

and you’ll see this rendered:

image541×269 23.4 KB

Now your second handle_params will always match as a last resort since it effectively has no pattern constraint.

I doubt you want the push_patch, just update the page in assigns and return the updated socket, LiveView will do the rest. This is probably why you’re seeing something run twice.

  def handle_params(%{"page" => page}, _uri, socket) do
    page = String.to_integer(page)

    socket =
      case page do
        1 ->
          assign(socket, page: 1)

        2 ->
          assign(socket, page: 2)
      end
    IO.inspect(page)

    {:noreply, socket}
  end

You might want to re-read the LiveView life cycle stuff in the docs. You may want to refresh yourself on pattern matching, and please post the actual error log next time. Also please try to post with formatting, otherwise it’s hard to follow.

Thank you for your help.

I specifically want to use the push patch because I want the input on page 1 to still be there when I go back from the component to page 1, if you understand what I’m saying?

Can you help with that?

What should happen if someone removes page from the URL params? It is not possible to guarantee that it is there, users can always remove it. You need to handle a case where it is not present, and set a default if it is not there.

That is a good point.
Thank you for your help.