jQuery in Phoenix 1.4 / Webpack

Phoenix Forum Questions / Help
,
1

Hi,

Following the Programming Phoenix 1.4 beta book, I’d like to use a simple jQuery selector in my form.html.eex template. I have a few questions as to what is the best approach for this:

  1. In which folder is it best to save the js file. If I have a Context/Model, e.g. Multimedia/Video - and a form.html.eex template for Video, where should I save the js code needed for this page? I prefer to save the js code near to the page on which it will be used, so I would have it in a folder such as templates/video/js but it seems that I have to put them in assets/js for webpack to know where to look. Is it common practice out there to do this?

  2. In anycase, my templates cannot find the jquery $ even though in my app.js I have this imported. I have put a simple <script> tag in the form.html.eex template which will use the $ jQuery selector, and I get an error saying $ is not defined - why is this? I thought $ was global when copied to priv/static/js/app.js?

Thanks

2

If You look at the application layout, the link to app.js is at the very end… which is usual for better loading performance. But the template are defined above, so they don’t know about $, because it will be defined later.

One solution I use is to put a placeholder for script just after loading app.js, like this…

<script type="text/javascript" src="<%= Routes.static_url(@conn, "/js/app.js") %>"></script>
<%= render_existing @view_module, "scripts.html", assigns %>

And in the corresponding view, I put

  def render("scripts.html", _assigns) do
    ~E(<script src="/js/page_tree.js"></script>)
  end

Scripts loaded this way have access to $.

But if You want to put javascript code inside template, You would probably need another solution.

It is not tested, but I think I would do it this way…

  • Split bundle in vendor.js and app.js, putting jquery and related into vendor.
  • Load vendor before rendering template.

By the way I use provide plugin in webpack config to load jquery.

    new Webpack.ProvidePlugin({ // inject ES5 modules as global vars
      $: 'jquery',
      jQuery: 'jquery', 'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    })

PS. One quick test would be to move the loading of app.js before rendering template…

2 Likes
3

Thanks, it works.
Now where do I put the page_tree.js script in my webpack config (I would prefer this over an import in app.js)? Does each page’s own js script have to be configured in webpack, it would seem a bit long winded to do so each time?

4

I put this file under /assets/static/js/

This way it will copied automatically to priv… (by CopyWebpackPlugin)

new CopyWebpackPlugin([{ from: 'static/', to: './' }]),

I don’t need to declare page_tree.js in webpack, but if it is declared after app.js, it will benefit of all the stuff You loaded in app.js.

PS. You can also define multiple entries in webpack.config.js, and use [name].js as output… This would bundle any js through webpack.

2 Likes
5

Thanks, actually I might have been confused earlier: $ is still undefined in the page_tree.js code.

I can access $ in the the console window of developer tools, but is undefined in page_tree.js where I tried to do run a simple $.ready( { .. });

I removed import $ from "jquery" in app.js after making it global via webpack as you said:

new Webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery'
})

and the script should be getting rendered after app.js. In app.htm.eex :

<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
<%= render_existing @view_module, "scripts.html", assigns %>

and the corresponding view has been set up as per your suggestion.

6

For note, at least Chrome (and I think Firefox and Edge too) all define $ if not otherwise defined and it works like a selector query from jQuery, a convenient helper.

To see if $ is actually defined, test is on window.$ instead.

1 Like
7

Thank you, this worked. I also didn’t need to use ProvidePlugin.

8

Well I had the same problem and finally got an solution here jQuery Plugins and Legacy Applications.

Just move directly to the last section of the page

Accessing jQuery from outside of Webpack JavaScript Files¶

… if you also need to provide access to $ and jQuery variables outside of JavaScript files processed by Webpack (e.g. JavaScript that still lives in your templates), you need to manually set these as global variables in some JavaScript file that is loaded before your legacy code.

For example, in your app.js file that’s processed by Webpack and loaded on every page, add:

// require jQuery normally (unless you already injected jquery global vars with webpack ProvidePluglin )
const $ = require('jquery');

+ // create global $ and jQuery variables
+ global.$ = global.jQuery = $;

The global variable is a special way of setting things in the window variable. In a web context, using global and window are equivalent, except that window.jQuery won’t work when using autoProvidejQuery() . In other words, use global .

That’s it ! ^^

1 Like