javascript assets in a Phoenix app

Steven F

unread,

Oct 18, 2015, 2:17:57 PM10/18/15

to elixir-lang-talk

Hello All, newbie but really enjoying the elixir Phoenix dev stack. I want to port all of my apps!

So I'm having trouble getting my jquery scripts working correctly. Is this considered fully fleshed out yet?

I started by including in my layout a javascript tag pointing at jquery.com. This worked but I thought a better solution is to reference my own copies. So I added jquery and jqueryui to package.json. Tthey have been fetched and built into my app.js file, but of course they don't seem to be loaded.

As I understand from the comments in my app.js they still need to be imported. It says to refer to the scripts by path, but that produces an error while rendering. So, the only lines that don't generate some sort of an error are:

import "jquery".

import jquery from "jquery".

This does seem to go through the jquery script, but my JQuery calls still aren't being made. I keep getting runtime javascript errors like

jQuery is not defined

or

$ is not defined.

in my other scripts. I do have my brunch set up to build jquery first, but that shouldn't even matter right? What would matter is the order they are imported...

Any help is much appreciated, thanks in advance for helping teach me this language!

Chris McCord

unread,

Oct 18, 2015, 2:20:51 PM10/18/15

to elixir-l...@googlegroups.com

Welcome Steven!

So the javascript world is in flux right now. You can only `import` modules that are wrapped in commonjs modules. When you place code in `web/static/js`, brunch will wrap it in a module and you can import it locally, assuming it is an es6 module. For “legacy” es5 code and already wrapped modules, you place those in `web/static/vendor`, then they will be available in the global js namespace. So put your jquery file in `web/static/vendor/jquery.js` and then you can just use the `jQuery` object anyway in your project without importing.

--
You received this message because you are subscribed to the Google Groups "elixir-lang-talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elixir-lang-ta...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/elixir-lang-talk/c4f742f9-6a42-4742-b6cb-db26d8cd80da%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Steven F

unread,

Oct 18, 2015, 3:40:46 PM10/18/15

to elixir-lang-talk

Thanks for the quick reply! I'm glad I bought your book!

https://pragprog.com/book/phoenix/programming-phoenix

I thought I could get that done in bower-config, but it builds into /priv/static/js and/or /priv/static/vendor.

But once I put the jquery files into /web/static/vendor and let bower copy everything into /priv/static/js/app/js it worked fine. Back in the familiar position where all problems are caused by myself. Great!

So my ultimate goal is to get the jquery-ujs stuff working. I can see you have some support for data confirm in phoenix_html.js. Do you plan on expanding this? I think Rails does some black magic in the background to support stuff like 'data-method':delete etc. Are there plans to support that? Is that the kind of thing someone could help with? I would like to chip in with the coding if it is the direction you want to go in.

Thanks again

Chris McCord

unread,

Oct 18, 2015, 3:43:31 PM10/18/15

to elixir-l...@googlegroups.com

We have `link “delete”, to: thing_path(@conn, :delete, thing), method: :delete)` already via the phoenix_html project

To view this discussion on the web visit https://groups.google.com/d/msgid/elixir-lang-talk/c102bfe1-6a81-4266-b659-e36de90cb0d4%40googlegroups.com.

Steven F

unread,

Oct 19, 2015, 8:00:28 AM10/19/15

to elixir-lang-talk

ok, starting to understand now... I do like it, you are creating the enclosing forms at render time? I guess that speeds things up rather than having javascript do it. So it would seem like using the jquery-ujs bower install wouldn't be needed or even work.

That is a great start as most of the other things I can handle myself in javascript. (like making those deletes ajaxy without data-remote = true). I also like using 'data-toggle' = "modal" and/or "menu", but that, and most of the other tricks I like can be done with some simple javascripting on my side.

Thanks again for the help, and great framework. I can't wait to see where this leads...

steve

seth...@gmail.com

unread,

May 27, 2016, 11:16:27 PM5/27/16

to elixir-lang-talk

I am trying to get jQuery working in the Phoenix application.

I got the advice from the Phoenix Guide where it instructs me to install the jQuery through NPM.

From the root of the directory

$ npm install --save jquery

In the brunch-config.js, I added the `jquery` to the whitelist.

In the web/static/js/app.js, I added `import $ from "jquery"` but jQuery didn't work.

So, I tried to exports the `$` and `jQuery` in the brunch-config.js file under whitelist section

globals: {

$: "jquery",

jQuery: "jquery"

}

However, it didn't work for me either.

I am able to get it working by placing the jquery.min.js in the web/static/vendor directory.

and in the brunch-config.file, I told Brunch to compile JS to the multiple targets.

joinTo: {

'js/vendor.js': /^(?!app\/)/,

'js/app.js': /^app\//

}

Here is the question, is this a correct thing for me to do? since the Static Assets Guide instructs to use the NPM so that it can resolve the dependency updates automatically.