How do I use JQuery in a Phoenix app?

I couldn’t get jQuery to work. Thanks for your help.

That’s a very good question. This style is a side effect only type of import that should run the script’s global code.

Maybe try to compile it separately in the esbuild args string and import it as a separate asset in the HTML head, and skip the extra step through app.js?

Or just straight-up inline the jquery_setup.js code in app.js?

Hurray! Clap, clap! I got all the methods you suggested to work. Somebody understands scope in javascript!

Out of curiosity, why didn’t my attempts with JQuery work? I clicked the link:

Download the uncompressed, development jQuery 3.6.4

and I copied the code and put it in ..assets/vendor/jquery.js.

In ../assets/js/jquery_setup.js, I have:

import jQuery from "../vendor/jquery"
window.jQuery = jQuery
window.$ = jQuery

And, in app.js I have:

import "./jquery_setup.js"

But, in my browser I get an error in the js console that says $ isn’t recognized. I looked through the jQuery code, and I don’t think it exports “jQuery” or “$”. If it would take too much time to figure out, don’t bother.

This will import hello into the scope of app.js, but will not make it available to the HTML document automatically unless you assign the function to the global window element.

// file: assets/js/app.js
import {hello} from "../vendor/my_functions.js" 
window.hello = hello

A good next step would be to namespace your exported functions, then assign that to the global element:

// file: assets/vendor/my_functions.js
export function hello () {...}
export function etc () {...}

// file: assets/js/app.js
import * as MyFunctions from "../vendor/my_functions.js" 
window.MyFunctions = MyFunctions

// in HTML <script>
window.onload = function () {
  MyFunctions.hello()
  MyFunctions.etc()
}

This can start to get unwieldy when you have a lot of functionality in multiple HTML scripts.

I would instead move them to app.js and set up your code from there:

// file: assets/js/app.js
import * as MyFunctions from "../vendor/my_functions.js" 

window.onload = function () {
    MyFunctions.hello()
}

// now this is only necessary if you also want to access them directly from the dev console
window.MyFunctions = MyFunctions

Lastly, if app.js also gets too large for your liking, or you only want to have certain features running in specific pages, you can move the relevant code to its own module, have esbuild compile it separately, then load it into your page.

// file: assets/js/my_feature.js
import { hello } from  "../vendor/my_functions.js" 

button = document.querySelector("#someButton")
button.addEventListener("click", () => { hello() }

add js/my_feature.js to the esbuild args string (and restart the server to apply changes to config files)

# file: config/config.exs
config :esbuild,
  version: "0.17.11",
  default: [
    args:
      ~w(js/app.js js/my_feature.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

<!--- my_page.html.heex or inside render/function component ~H template -->
<script defer phx-track-static type="text/javascript" src={~p"/assets/my_feature.js"}>
</script>

<button id="someButton" type="button">Run hello()</button>

I also highly recommend Elixir in action, but PragDave is the only one that spends the time to make your mind shift from OOP to FP and thats why I always recommend his book first.

Another excellent book is Real-Time Phoenix by @sb8244:

% elixir --version
Erlang/OTP 24 [erts-12.3.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1]

Elixir 1.14.4 (compiled with Erlang/OTP 24)

I’m using Phoenix 1.7.2, which I installed a few days ago with the command:

$ mix archive.install hex phx_new

mix.exs:

defmodule MyWeb.MixProject do
  use Mix.Project

  def project do
    [
      app: :my_web,
      version: "0.1.0",
      build_path: "../../_build",
      config_path: "../../config/config.exs",
      deps_path: "../../deps",
      lockfile: "../../mix.lock",
      elixir: "~> 1.14",
      elixirc_paths: elixirc_paths(Mix.env()),
      start_permanent: Mix.env() == :prod,
      aliases: aliases(),
      deps: deps()
    ]
  end

  # Configuration for the OTP application.
  #
  # Type `mix help compile.app` for more information.
  def application do
    [
      mod: {MyWeb.Application, []},
      extra_applications: [:logger, :runtime_tools]
    ]
  end

  # Specifies which paths to compile per environment.
  defp elixirc_paths(:test), do: ["lib", "test/support"]
  defp elixirc_paths(_), do: ["lib"]

  # Specifies your project dependencies.
  #
  # Type `mix help deps` for examples and options.
  defp deps do
    [
      {:phoenix, "~> 1.7.2"},
      {:phoenix_html, "~> 3.3"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_view, "~> 0.18.16"},
      {:floki, ">= 0.30.0", only: :test},
      {:phoenix_live_dashboard, "~> 0.7.2"},
      {:esbuild, "~> 0.7", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.2.0", runtime: Mix.env() == :dev},
      {:telemetry_metrics, "~> 0.6"},
      {:telemetry_poller, "~> 1.0"},
      {:gettext, "~> 0.20"},
      {:jason, "~> 1.2"},
      {:plug_cowboy, "~> 2.5"}
    ]
  end

  # Aliases are shortcuts or tasks specific to the current project.
  #
  # See the documentation for `Mix` for more info on aliases.
  defp aliases do
    [
      setup: ["deps.get", "assets.setup", "assets.build"],
      "assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
      "assets.build": ["tailwind default", "esbuild default"],
      "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
    ]
  end
end

I’ll try adding my js file to a non umbrella project and see if I get different results.

Does your umbrella project happen to be created using an older version of the Phoenix generators?

I purchased “Elixir in Action” using a discount code on this forum. I’ve read part of it. It is very good. At the same time, I purchased “Phoenix in Action”, and I’m revisiting it now.

For me one of the best courses and book that made me switch my brain from Object Orientated Programming to Functional Programming.

I spent a few years learning erlang before elixir.

I’ve already read it.

I tried creating a js module, but it doesn’t work for me. Here’s what I tried:

../assets/vendor/my_functions.js

export function hello() {
  alert("My javacript functions got imported!")
};

../assets/js/app.js

import {hello} from "../vendor/my_functions.js"  

Without the braces around hello, I got the following error:

No matching export in "vendor/my_functions.js" for import "default"

    js/app.js:21:7:
      21 │ import hello from "../vendor/my_functions.js"
         ╵        ~~~~~

Template:

<section>
  <div id="fade_target">Hello world, from Demo!</div>
</section>
<script>
  window.onload = function() {
      hello()
  } 
</script>

Error in the javascript console in my browser:

ReferenceError: Can’t find variable: hello

which points here:

            <section>
                <div id="fade_target">Hello world, from Demo!</div>
            </section>
            <script>
            window.onload = function() {
                hello()   <===============================
            }
            </script>