phx-click not working at all

Hello,

You did not use the right markdown… it’s ``` to wrap your code :slight_smile:

Like this.

def this_is_code() do
  ...
end

@tubbs - that’s not quite what I meant. Here was my reasoning:

Your LiveView should work, so that’s not the source of the problem. As your project is so close to a vanilla phx.new template, it’s unlikely that there’s a basic phoenix plumbing issue (and no-one has spotted any with what you’ve posted so far).

As @benwilson512 pointed out, the mix phx.server output showed no LiveSocket connection happening. If the LiveDashboard (which also uses LiveSocket) is working, that seems to rule out an oddity of your environment somehow stopping all web sockets working.

As this all adds up to a bit of an opaque puzzle, I thought if someone could download your entire project and run it on their machine, they might find something non-obvious. But for that you’d need to make the whole project available somewhere (eg. github).

By the way, just to expand on @kokolegorille’s comment, it’ll be easier for people to read your code if you quote with backticks so it displays readably. You can check before posting by looking at the preview to the right of the post text input. If you’re not clear on how to do this, have a read of How to post code or preformatted text - howto / tips & tricks - Discourse Meta

It might be useful to see if your [project]/assets/js/app.js is running at all when your CounterLive route loads - perhaps put a console.log("test ..") in there and check to see if the output appears in the browser js console.

It might jog an idea somewhere if you describe your environment. What OS are you using? How did you install Elixir?

@tubbs So, your last post (the one providing the content of assets/js/app.js) doesn’t have the required code in order for LiveView to work. You need to add the part, once the original http request has loaded in your browser, requesting a connection to the live socket and that’s missing here. I suggest looking in https://hexdocs.pm/phoenix_live_view/installation.html and make sure everything is set properly.

But to resume, you need to add in templates/layout/app.html.* the CSRF tag if it’s not there yet (and make sure you are properly loading the app.js file too):

<%= csrf_meta_tag() %>
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>

And then add the live socket connection request in assets/js/app.js:

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

Also, in your router file, you are using the :fetch_flash plug, but LiveView use the :fetch_live_flash. So make sure to follow the link for checking your installation :wink:

@crispinb I’m pretty sure LiveDashboard only requires the live socket to be set in your endpoint. After that, it uses it’s own app.js file to request the connection, which would explain why it’s working here while the normal pages aren’t.

Yes of course. Any idea why the app.js isn’t as expected - an old Phoenix version, presumably? In which case @tubbs would presumably be best off updating?

It seems he/she got the file for non-live generation, despite saying using the --live flag. It could have been a bug, but just tried, and the current one doesn’t have that problem (so would have been fixed since then).

yes, @tubbs whats the phoenix version:

mix phx.new --version

or if this fails

mix phoenix.new --version

Again thanks for all support. I just made a new Ubuntu install and l will try this out from scratch later on and make sure l have the latest version. Anyone have a link to a simple beginners tutorial on liveview? Something simple like this one?