How do I get Phoenix.LiveView.JS commands to work?

Howdy,

Sorry for the most likely very noob question as I’m very new to Phoenix and programming in general but I’ve been trawling through Hexdocs and came across: Phoenix.LiveView.JS — Phoenix LiveView v0.17.11

I get the general principles and have no issues following the guide in terms of what the different JS. commands actually do, however I’m struggling immensely with seeing them in action which I assume is due to lack of knowledge of the structure of Phoenix.

My original assumption was that the functions are defined in the js.ex file and that you can upon them within .heex files with examples like the ones shown in Hexdocs.

If I copy one of the examples to my test projects .heex files, Liveview comes up with an error stating ‘(module JS is not available)’.

Sorry again if it’s totally obvious, but would someone be able to explain to me or point me in the right direction on how to get JS. commands to work in LiveView?

Pretty sure all I need is one solid example of what goes where and I can figure the rest out from there.

Thanks

Did you alias Phoenix.LiveView.JS in your module?
Is live_view.js imported in your asset bundle?
Are versions recent? JS was introduced in 0.17

  1. With regards to alias I see ’ alias Phoenix.LiveView.JS’ on all sorts of guides, as well as within the js.ex file itself but nowhere tells you how or more specifically where to actually use it. Do I need to put alias Phoenix.LiveView.JS in the *_view file like some sort of import each time I want to use it?
    Any references I can find on ‘Alias’ all just tell me it’s used to shorten links effectively, whereas the Phoenix.Live.View.JS guides never mentions this.
  2. Presumably not. Again I’m totally new to Phoenix so don’t know what goes where unless its mentioned somewhere which is why I was asking for help.
  3. {:phoenix_live_view, “~> 0.17.5”},

You need to put it in every file where JS is referred to as JS (without Phoenix.LiveView. in front of it)

1 Like