LiveView Form debugging - phx_submit not getting triggered

venomnert

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.

18 comments

/phoenix #phoenix_html #liveview #form

0 6614 18

2020-11-20 14:10:34 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

mindok

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…

Post #1

venomnert

Hey @mindok,

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

Post #2

mindok

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

Post #3

venomnert

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.

Post #4

mindok

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

Post #5

venomnert

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

Post #6

mindok

Ok, a few more things:

Are there any error messages in the console running the application?
What are the results from your IO.inspect call? (i.e. do you get one false, and then one true result?)
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()

Does your browser report any errors in the console?

Post #7

venomnert

Are there any error messages in the console running the application?
A: No error message
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

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()

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.

Post #8

mindok

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: GitHub - pthompson/live_component_examples · GitHub

Post #9