Adding a Bit of Javascript to Phoenix Template

Phoenix Forum Questions / Help
, ,
1

I have had some good success with using pure Phoenix template/html so far however I have a layout that uses a dropdown menu and I need to use a bit of javascript to accomplish some of the click, show, hide, etc events. Most of the guides I have seen are adding entire frameworks to handle the frontend etc. What would be a simpler option if I want to add some javascript to a navbar.html.eex saved in my layout folder which is then rendered in app.html.eex

2

It depends… some will use css framework that does include some JS, with maybe dependency on jQuery, like Bootstrap.

But many would like to drop jQuery dependency, in favor of vanilla JS.

But if You want to code your own JS, then again You have the choice of bundling it into webpack, or not. You also have the option to copy those files by putting them into assets/static, and reference them in template.

You can also bundle it with webpack, but good knowledge of the tool is required :slight_smile:

3

For simple actions what I do is to add Javascript inside <script> tags at the end of the Html.eex file (to make suer elements are already mounted in the DOM when the javascript is executed.
For simple visual effects it should be fine.

4

Thank you, yea I think I was overthinking this one a bit. I am going to start with simple javascript at the end of the file and see how far I can get with that first.

5

Yes, then you can evolve to create a component/module that encapsulates HTML, javascript and also pass some style that you can inject directly to the elements, overriding existing styles if needed.
Menus are a great example of a Module that is created by putting together simpler components (like buttons) in a html.eex file.
Start simple, learn and then adapt.

1 Like
6

Another newer option for this sort of thing is Alpine.JS. The default Phoenix project setup makes it easy to install/drop this into your app.js, then Alpine is built for “sprinkling” into any templating language and adding more of a “reactive” style of programming using your existing DOM nodes.

3 Likes
7

I havent heard of it but thank you for sharing it does look really helpful. I dont have a ton of javascript experience (have always used Vue to do things) but it doesnt feel right to use Vue to accomplish pretty simple things. If vanilla javascript gets me in over my head on something Alpine seems like a good middle ground.

8

Alpine is heavily inspired by Vue (minus a lot of the heft included with Vue), so it should look familiar. :+1:

9

You also have Stimulus.js, or the web platform’s Custom elements if you don’t want any framework/dependency.

Stimulus leverages data-attributes to add behavior to your document.
Custom elements let you define your own <dropdown-tag>, or extend a built-in element resulting in <div is="my-dropdown">. As you’ll see in the following examples, you do not need to use ShadowDom with all it’s issues to use custom elements.

With Stimulus your markup would look like:

<div data-controller="dropdown">
  <button data-action="click->dropdown#toggle">Click me!</button>
  <div data-target="dropdown.content" class="hidden">Dropdown Content!</div>
</div>

And your controller:

import { Application, Controller } from "stimulus";

class Dropdown extends Controller {
  static targets = ["content"]

  toggle() {
    this.contentTarget.classList.toggle("hidden");
  }
}

const app = Application.start();
app.register("dropdown", Dropdown);

With custom elements, your markup would look like this:

<x-dropdown>
  <button dropdown-trigger>Click me!</button>
  <div dropdown-content class="hidden">Dropdown content!</div>
</x-dropdown>

And the js

class XDropdown extends HTMLElement {
  connectedCallback() {
    this.trigger = this.querySelector("[dropdown-trigger]");
    this.content = this.querySelector("[dropdown-content]");

    this.trigger.addEventListener("click", this);
  }

  handleEvent(event) {
    if(event.type === "click" && event.currentTarget === this.trigger) {
      this.content.classList.toggle("hidden");
    }
  }
}

customElements.define('x-dropdown', XDropdown);

For more info in handleEvent, see this post.

Or with built-in extends:

<div is="x-dropdown">
  <!-- ... -->
</div>

class XDropdown extends HTMLDivElement {
  // ...
}

customElements.define('x-dropdown', XDropdown , { extends: 'div' });

I’m currently using both Stimulus and custom elements via WebReflection/heresy for some non trivial js parts, and I can recommend both.

2 Likes
10

Thank you for all of the great suggestions and options. I was able to get really far quickly with Alpine, especially since I come from a Vue background. I will definitely explore other options as I move forward.

2 Likes