Phoenix: $ is not defined

Phoenix Forum Questions / Help
, ,
1

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!

2

And you’re including app.js in 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?

3

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:

http://writing.colin-gourlay.com/safely-using-ready-before-including-jquery/

You put this in the head:

...
<head>
...
<script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script>
</head>

And then you put this after your <script src="app.js"></script>:

<script>(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script>
4

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 like require("jQuery")... (if using brunch) or so (which you can bind to a variable if you want).