yas
Hello,
I have a template which holds a form with a few elements. I need to initialize the JS for some of these elements using jquery, but I keep getting an error saying: “$ is not defined”. I followed all the steps in this post: Setup, import and use Javascript in Phoenix and also from the official Phoenix docs.
Here is the npm section of my brunch-config.js:
npm: {
enabled: true,
whitelist: ["jquery"],
globals: {
$: 'jquery',
jQuery: 'jquery'
}
}
Here is how I am calling the script from my template:
<script>
$('.ui.tags.dropdown').dropdown({
keys: {delimiter: 13},
allowAdditions: true
});
</script>
Please let me know if I can provide more information.
Any help would be much appreciated, thanks in advance!
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ai
- #ecto-query
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #metaprogramming
- #hex
Our Sponsors
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Master modern tools, write cleaner code, and tackle real-world challenges.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 3- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
amnu3387
And you’re including
app.jsin your layout/page right? If so have you tried moving the script around on the page to be at the beginning/end of the body tag?ryh
My understanding is that you have to include the app at the beginning of the document in the
<head>. I don’t really like that, so I found this:You put this in the head:
And then you put this after your
<script src="app.js"></script>:OvermindDL1
Remember that things compiled into modules are not available at global scope nor should they be. Instead of doing things like
$...you should be doing things likerequire("jQuery")...(if using brunch) or so (which you can bind to a variable if you want).