How can I use JavaScript in Phoenix LiveView?

Phoenix Forum Questions / Help
, ,
1

I am having troubles with running JavaScript inside Phoenix.

Things that work in a normal html file doesn’t seem to work from Phoenix LiveView templates.

I need some basic stuff to work and can’t find any tutorial or docs.

Thanks for any links.

2

What you are looking for is Javascript Interop in the Phoenix LiveView docs.

2 Likes
3

I don’t understand anything there. Seems like Phoenix is too complicated for me ;(.

Isn’t there any real world example when you want to use JavaScript inside templates of Phalcon?

I don’t want to involve the server at all, all I want to have a simple button click check based on a cookie state. But the problem is that the cookie is for some reason ignored. Defer in script or moving script at the end isnt helping. In plain html it works as stated here: Cookies in Phoenix LiveView not taken into account only after the second F5 refresh

4

So what you would do is set up a hook in your JS that your button will trigger, and then in the Hook (JS) you could access your cookie, do whatever you want, and push the result back to the LiveView to be handled.

1 Like
5

I want everything to execute in browser, don’t want to send back and forth code to the backend. the cookies are stored in the browser it should be done everything on the client locally. Check this code of mine: Cookies in Phoenix LiveView not taken into account only after the second F5 refresh - #3 by dojap

6

I’m not sure why you split this to multiple threads? You could have just written more to the original thread if you think you didn’t get all the answers you needed.

You need to use LiveSocket’s params to pass initial values. So you need to get values from cookies and pass them as params for LiveSocket. Then you need to use that passed parameter to show/hide the tool tip in LiveView’s view markup. There is already example in your other thread that passes _csrf_token as param.

I want everything to execute in browser, don’t want to send back and forth code to the backend

If you want everything to execute in browser are you sure LiveView is really what you want to use?

1 Like
7

Also personally I would use localStorage, it will work great with LiveSocket params and I’ve done just that in one of my personal project. Both cookie and localStorage are shared between browser tabs so you can get into all kinds of oddities if you switch between browser tabs that contain you app/site. Better solution is to read the cookie/localStorage to a variable on page load. Then always use that variable but when you change it write value to both, that variable and cookie/localStorage.

To summarize:

  • During page load read “showTips” from localStorage/cookie to a local variable called showTips
  • Pass showTips as LiveSocket param
  • Use showTips param in your live view markup to show/hide tips
  • Use showTips variable when you check if tips should be shown or not in the browser
  • If showTips variable is changed also write same value to “showTips” in localStorage/cookie.
8

That is not how Phoenix LiveView work, there’s a couple of great resources out there explaining the programming model (Chris has a great video on it, though I can’t remember which conference it was).

The rough outline is that, when a user visits a LiveView page, Phoenix sends down a bunch of HTML down the server, the client then connects to LiveView via WebSocket (powered by Phoenix Channels). Then, given that you have attributes like phx-click, these events are then sent to LiveView via websocket, and LiveView responds via websocket - as you can see, nothing is done “fully on browser” as you initially thought.

This is where the JS interops come in though, for example say things like a menu state where you don’t need to send things to backend, you can do it fully locally like you want with JS interops. There’s two ways to do this, either via LiveView’s hooks, or via external dependency like Alpine.

2 Likes