theAntimon

Getting "no route found for POST" in a liveView form

Hey people.

I’m trying to make my way through this article

https://littlelines.com/blog/2020/07/06/building-a-video-chat-app-in-phoenix-liveview

I’m not very experienced with Phoenix and LiveView I have to say. Just finding my way into the web topic. Anyway.. Since this article is already some days old I need to change a lot to make it work with today’s phoenix. But I got stuck pretty early. The form to make a new room was based on ~L and I have to move it into the whole ~H world. This is the render/1 function I came up with:

  @impl true
  def render(assigns) do
    ~H"""
    <h1>Create a New Room</h1>

    <.form :let={f} for={@changeset} phx-change="validate" phx-submit="add_match_result">
      <.input field={{f, :title}} name="title" type="text" label="title" value={nil} />
      <.input field={{f, :slug}} name="slug" type="text" label="slug" value={nil} />
      <.button phx-disable-with="Saving...">Save</.button>
    </.form>
    """
  end

I thought it is pretty straight forward and I expected a callback to handle_event/3. But this is not happening. Instead I get an error inside my browser telling me

no route found for POST /room/new (LittlechatWeb.Router)

after I clicked the save button. As far as I understood liveView a POST request is the wrong thing to happen. But what is going wrong here?

This is the maybe important part of my router.ex if that helps:


  scope "/room" do
    live "/new", LittlechatWeb.Room.NewLive, :new
    live "/:slug", LittlechatWeb.Room.ShowLive, :show
  end

9 comments

/phoenix #liveview #liveview-form

0 1268 9

2024-08-25 02:54:53 UTC

Most Liked

kigila

I found the issue. I have soime javascript in my app.js which were messing up with my DOM. So guys, look at your javascript and do some testing. desable some and see what happen. hope this helps

Post #9

caleb-bb

Can we see the event handler for add_match_result? Are you sure it’s not being called?

Generally, if a POST request is being sent, Liveview has failed somehow. Have you checked your js console in-browser as well?

Post #2

arcanemachine

I strongly advise you to bail on that tutorial and try to find something a little newer. LiveView changes fast (less so as time goes on) and old content is likely to lead you down blind alleys. Here a couple good resources I found helpful when I was starting:

https://github.com/dwyl/phoenix-liveview-counter-tutorial

Also the GitHub account from the second link has a couple other good repos to learn LiveView concepts. Some of their implementations are a bit off (e.g. their Presence implementation was kinda half-baked IMO) but at least the code will compile.

Now to justify my initial position with some aimless ranting (I’d say I’m in the ‘advanced beginner’ skill level for Phoenix/LiveView). Yes, the code you posted should not result in any POST requests. If you look at the rendered HTML in your DevTools, you will probably find that the form has method="POST" in it (not sure why or how) because I believe that by default, a basic form should render a GET request. So that’s all weird.

If you were to create a POST endpoint in your router, it would look like this:

post "/create", YourController, :create

Of course, you didn’t, and since you used phx-submit in your <.form> component, that should mean that no POST request should be emitted at all. The Phoenix LiveView JS should intercept the form’s submit event and pass the event data to your Elixir code through the websocket instead of doing an HTTP POST request. But it’s not. Maybe try using the <.simple_form> component that’s part of the newer Phoenix function components? That’s the only thing I can think of off the top of my head. Perhaps the older <.form> Phoenix.HTML component may not accept the phx-submit attribute… just a guess. Check the HTML in your browser to see if the phx-submit attribute actually shows up in your <form> element. That would be my suspicion.

But yeah, since the browser is doing a POST request, I’m 99% sure that means that it’s not doing the websocket request, which is why you’re not seeing anything in the Elixir terminal.

TLDR; I think the <form> element in your HTML (in the browser) doesn’t actually have the phx-submit attribute and it may be because <.form> isn’t passing the attribute through. Either way, I strongly recommend finding a newer tutorial to work with.

Post #5

Last Post!

walker

I also encountered this problem, this problem occurs because of the liveview client (app.js) is not returned to the browser. solved it by adding pipe_through. as follows.

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :put_root_layout, html: {YourAppWeb.Layouts, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers
    plug :fetch_current_user
  end

  scope "/room" do
   pipe_through [:browser]
    live "/new", LittlechatWeb.Room.NewLive, :new
    live "/:slug", LittlechatWeb.Room.ShowLive, :show
  end

Post #10