LiveView Form debugging - phx_submit not getting triggered

Context:

I am trying to setup a simple liveview form.

Help:

When I visit the form /client/new and submit an entry, phx_submit event doesn’t get triggered. It instead makes a post request to /client/new which doesn’t exist.

lib/contact_us_web/live/client_live/index.ex

defmodule ContactUsWeb.ClientLive.Index do
  use Phoenix.LiveView

  alias ContactUsWeb.Router.Helpers, as: Routes
  alias ContactUsWeb.ClientView
  alias ContactUs.Accounts
  alias ContactUs.Accounts.Client

  def mount(_session, socket) do
    changeset = Accounts.change_client(%Client{})
    {:ok, assign(socket, :changeset, changeset)}
  end

  def render(assigns) do
    Phoenix.View.render(ClientView, "form.html", assigns)
  end

  def handle_event("save", args, socket) do
    IO.inspect(args, label: "VALDIATE DATA")

    {:noreply, socket}
  end
end

lib/contact_us_web/templates/client/form.html.leex

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

  <%= label f, :first_name %>
  <%= text_input f, :first_name %>
  <%= error_tag f, :first_name %>

  <%= label f, :last_name %>
  <%= text_input f, :last_name %>
  <%= error_tag f, :last_name %>

  <%= label f, :email_address %>
  <%= text_input f, :email_address %>
  <%= error_tag f, :email_address %>

  <%= label f, :phone_number %>
  <%= text_input f, :phone_number %>
  <%= error_tag f, :phone_number %>

  <%= label f, :company %>
  <%= text_input f, :company %>
  <%= error_tag f, :company %>

  <%= label f, :service %>
  <%= text_input f, :service %>
  <%= error_tag f, :service %>

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

I made sure everything is setup properly. However, I’m unable to determine what the issue is.

Hi @venomnert,

Have you verified that your liveview is mounting correctly? Put an IO.inspect in the mount (you should see the message twice - once for the initial render and once when the websocket connection is made) and render functions. If it itsn’t, then double-check your router setup.

Also, do you have any other liveview functionality behaving properly in the application? You may have issues with javascript library versions etc…

1 Like

Hey @mindok,

I have tried adding ‘connect?(socket)’ inside of my mount function and it always returns false

Just heading out so answer will be brief… try a different browser, and recheck installation and JavaScript wire up instructions…

Hey @mindok,

I have tried the following:

  • Re-install elixir and js deps
  • I have followed the instruction given here deps/phoenix_live_view/guides/introduction/installation.md
    • However this snippet socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]] causes some error, so i have ignored.

I’m still getting the same results.

BTW I do want to say thank you for helping me out.

OK - that bit that is causing you errors is important - it is how the browser and liveview server communicate.

What if you just try
socket "/live", Phoenix.LiveView.Socket, websocket: true
or even just
socket "/live", Phoenix.LiveView.Socket
as per https://hexdocs.pm/phoenix_live_view/installation.html#content

If those don’t work, post the error messages

Hey @mindok I have tried what you have suggested, but still no luck. BTW here it code I used to check connection status:

  def mount(_session, socket) do
    IO.inspect(connected?(socket), label: "CONNTECTION STATUS")
    changeset = Accounts.change_client(%Client{})
    {:ok, assign(socket, :changeset, changeset)}
  end

Ok, a few more things:

  1. Are there any error messages in the console running the application?
  2. What are the results from your IO.inspect call? (i.e. do you get one false, and then one true result?)
  3. Have you added the necessary lines to your app.js to initiate the socket connection on the javascript side?
    e.g.
let liveSocket = new LiveSocket("/live", Socket)
liveSocket.connect()
  1. Does your browser report any errors in the console?
  1. Are there any error messages in the console running the application?
    A: No error message

  2. What are the results from your IO.inspect call? (i.e. do you get one false, and then one true result?)
    A: Here is the log I get when I do inspect

[debug] Processing with ContactUsWeb.ClientController.new/2
  Parameters: %{}
  Pipelines: [:browser]
CONNTECTION STATUS: false
[info] Sent 200 in 1ms
[info] GET /sw.js
  1. Have you added the necessary lines to your app.js to initiate the socket connection on the javascript side?
    A: Yep, copied from the installation guide
import css from "../css/app.css"
import "phoenix_html"

import {Socket} from "phoenix"
import LiveSocket from "phoenix_live_view"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}});
liveSocket.connect()
  1. Does your browser report any errors in the console?
    A: No console log error.

What i’m thinking of doing next is a fresh install of liveview.

Yep - something isn’t right. You should see your connected? return true. See if you can find a working liveview sample project on github to clone from - the master liveview sample project is a bit out of date with versions, but this one uses the latest version: https://github.com/pthompson/live_component_examples

One more thing…

Check that your app.js is getting executed. Put something like console.log(“hello it’s working”);
just before the liveview connection code

Open your page and check the browser console for your message. If you don’t see it you know what you need to fix…

Hey @mindok I believe this is it. Here is what I’m getting.

assets/js/app.js

import css from "../css/app.css"
import "phoenix_html"

import {Socket} from "phoenix"
import LiveSocket from "phoenix_live_view"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}});

console.log(Socket, "SOCKET");
console.log(liveSocket.connect());

In normal browsing mode I don’t get any console, however, when I empty cache and hard reload or visit incognito mode I get the following log in phoenix

[info] REFUSED CONNECTION TO Phoenix.LiveView.Socket in 218µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Connect Info: %{}
  Parameters: %{"_csrf_token" => "O30ePiBaAy8jIXIqcxB1OEE1EDcIJyt4jLDpf3iekE6lFaMv-ljdWVF7", "vsn" => "2.0.0"}
[error] LiveView was not configured to use session. Do so with:

1) Find `plug Plug.Session, ...` in your endpoint.ex and move the options `...` to a module attribute:

    @session_options [
      ...
    ]

2) Change the `plug Plug.Session` to use said attribute:

    plug Plug.Session, @session_options

3) Also pass the `@session_options` to your LiveView socket:

    socket "/live", Phoenix.LiveView.Socket,
      websocket: [connect_info: [session: @session_options]]

4) You should define the CSRF meta tag inside the in <head> in your layout: 

    <%= csrf_meta_tag() %>

5) Then in your app.js:

    let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
    let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}});

[info] REFUSED CONNECTION TO Phoenix.LiveView.Socket in 204µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Connect Info: %{}
  Parameters: %{"_csrf_token" => "O30ePiBaAy8jIXIqcxB1OEE1EDcIJyt4jLDpf3iekE6lFaMv-ljdWVF7", "vsn" => "2.0.0"}

And i’m able to see JS console as well. But when I do a normal refresh, my assets get’s cached and i don’t see the JS console anymore.

Hmmm. So we know where the problem is. I can’t help much with this - I don’t know the asset reloading area well enough to debug without it in front of me. Maybe you could start a new topic around reloading app.js.

Sounds good, I will check it out. Once again thanks for you help :smiley: :+1:

1 Like

Hey @mindok I have resolved the issue.

The problem was with this code socket "/live", Phoenix.LiveView.Socket, websocket: true within the endpoint.ex

I had to provide it the same session info that was provided to plug Plug.Session.

I was able to solve this after carefully reading Phoenix error messaging, which was clear and concise :+1:t5:

Here are the following update:
contact_us/lib/contact_us_web/endpoint.ex

defmodule ContactUsWeb.Endpoint do
  use Phoenix.Endpoint, otp_app: :contact_us
  @session_options [
    store: :cookie,
    key: "_contact_us_key",
    signing_salt: "piqiBzEh"
  ]

  socket "/live", Phoenix.LiveView.Socket,
  websocket: [connect_info: [session: @session_options]]

  socket "/socket", ContactUsWeb.UserSocket,
    websocket: true,
    longpoll: false

  # Serve at "/" the static files from "priv/static" directory.
  #
  # You should set gzip to true if you are running phx.digest
  # when deploying your static files in production.
  plug Plug.Static,
    at: "/",
    from: :contact_us,
    gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt)

  # Code reloading can be explicitly enabled under the
  # :code_reloader configuration of your endpoint.
  if code_reloading? do
    socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
    plug Phoenix.LiveReloader
    plug Phoenix.CodeReloader
  end

  plug Plug.RequestId
  plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint]

  plug Plug.Parsers,
    parsers: [:urlencoded, :multipart, :json],
    pass: ["*/*"],
    json_decoder: Phoenix.json_library()

  plug Plug.MethodOverride
  plug Plug.Head

  # The session will be stored in the cookie and signed,
  # this means its contents can be read but not tampered with.
  # Set :encryption_salt if you would also like to encrypt it.
  plug Plug.Session, @session_options

  plug ContactUsWeb.Router
end

contact_us/assets/js/app.js

import css from "../css/app.css"
import "phoenix_html"

import {Socket} from "phoenix"
import LiveSocket from "phoenix_live_view"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}});
liveSocket.connect()

contact_us/lib/contact_us_web/templates/layout/app.html.eex

  <head>
    <meta charset="utf-8"/>
    <%= csrf_meta_tag() %>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>ContactUs · Phoenix Framework</title>
    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
    <%= csrf_meta_tag() %>
  </head>
2 Likes

Hi @mindok, I’m currently struggling with nearly the same issue.
And I receive an error in my console Uncaught SyntaxError: Cannot use import statement outside a module
I tried this already with Google Chrome and Safari.
Do you know what I’m doing wrong here?

Hi @fklement,
That’s an issue on the javascript side - not my area of expertise. However, I googled the error message and there are quite a few helpful suggestions out there - e.g. https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import. See how you go with those, otherwise you will need to put your app.js up here for us to take a look.

I just solved it. Probably it was just too late yesterday and I was sitting too long in front of the computer :smile:
The problem was that I messed up the webpack.config.js. And therefore the /js/ parts were not copied correct to the statics folder.

1 Like

Just found this after I had run into the same problem. The JS not being executed was a good hint.

I had chosen to use a CSS framework and replaced the original CSS/JS loading in the root template, but the original app.js is required to establish the socket connection.