elixirphoenix-frameworkphoenix-live-view

Phoenix LiveView form_for raising NoRouteError at POST


So I'm trying to make a phoenix live view application, and I came across a problem when I tried to implement it into my already existing project. I made a form using the form_for that phoenix.html provides, and it makes a post request to the server at my live socket. This shouldn't happen I don't think, because I successfully did the demo and it allowed me to post to the live view. Here is the error:

[debug] ** (Phoenix.Router.NoRouteError) no route found for POST /test_live/1 (OkayfivePhxWeb.Router)
(okayfive_phx 0.1.0) lib/phoenix/router.ex:330: OkayfivePhxWeb.Router.call/2
(okayfive_phx 0.1.0) lib/okayfive_phx_web/endpoint.ex:1: OkayfivePhxWeb.Endpoint.plug_builder_call/2
(okayfive_phx 0.1.0) lib/plug/debugger.ex:130: OkayfivePhxWeb.Endpoint."call (overridable 3)"/2
(okayfive_phx 0.1.0) lib/okayfive_phx_web/endpoint.ex:1: OkayfivePhxWeb.Endpoint.call/2
(phoenix 1.4.16) lib/phoenix/endpoint/cowboy2_handler.ex:42: Phoenix.Endpoint.Cowboy2Handler.init/4
(cowboy 2.7.0) /mnt/c/Users/oriont/dev/okayfive_phx/deps/cowboy/src/cowboy_handler.erl:41: :cowboy_handler.execute/2
(cowboy 2.7.0) /mnt/c/Users/oriont/dev/okayfive_phx/deps/cowboy/src/cowboy_stream_h.erl:320: :cowboy_stream_h.execute/3
(cowboy 2.7.0) /mnt/c/Users/oriont/dev/okayfive_phx/deps/cowboy/src/cowboy_stream_h.erl:302: :cowboy_stream_h.request_process/3
(stdlib 3.11.2) proc_lib.erl:249: :proc_lib.init_p_do_apply/3

Here is the live controller: (test_live.ex)

defmodule OkayfivePhxWeb.TestLive do
  use Phoenix.LiveView

  alias OkayfivePhx.Quizzes

  def mount(_params, _session, socket) do
    {:ok, assign(socket, count: 0)}
  end

  def handle_params(%{"id" => id}, _url, socket) do
    {:noreply,
     assign(socket, %{
       user: id,
       changeset: Quizzes.change_student_answer(%Quizzes.StudentAnswer{})
     })}
  end

  def render(assigns), do: OkayfivePhxWeb.QuizView.render("test.html", assigns)

  def handle_event("save", %{"user" => _user_params}, socket) do
    IO.inspect("GET SAVED ON")

    {:noreply, socket}
  end
end

Here is the test.html.leex:

<%= f = form_for @changeset, "#", [phx_submit: :save, phx_hook: "SavedForm"] %>

  <%= label f, :answer %>
  <%= text_input f, :answer, phx_debounce: "blur" %>
  <%= error_tag f, :answer %>

  <div>
    <%= submit "Save", phx_disable_with: "Saving..." %>
  </div>
</form>

So I tried doing something else, which was a form using just html and attributes:

<form phx-change="validate" phx-submit="save">
  <input type="text" name="user[email]" phx-debounce="blur"/>
  <input type="text" name="user[username]" phx-debounce="2000"/>
  <input type="submit" value="Submit">
</form>

And to my surprise, this form wouldn't raise the no route error. But, it still didn't call the handle_event function that I defined in test_live.ex

Here is my router:

pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :protect_from_forgery
    plug :put_secure_browser_headers
  end

scope "/", OkayfivePhxWeb do
    pipe_through :browser
...
    live "/test_live/:id", TestLive
...

  end

Any help is appreciated. Thanks!


Solution

  • I actually figured it out, and I feel pretty stupid now. The reason was that I wasn't using a layout with the liveview render thing, meaning this thing:

    <%= @inner_content %>
    

    MAKE SURE THIS IS IN YOUR LAYOUT, AND THAT THE LAYOUT ACTUALLY WORKS.

    If not, your form will make a post request, and not through the web socket.