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.
Please advise and thanks for this wondering web framework.
On Sunday, October 18, 2015 at 2:20:51 PM UTC-4, Chris McCord wrote:
>
> 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.
>
>
> On Oct 18, 2015, at 2:17 PM, Steven F <[email protected] <javascript:>>
> wrote:
>
> 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!
>
> --
> 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 [email protected] <javascript:>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/elixir-lang-talk/c4f742f9-6a42-4742-b6cb-db26d8cd80da%40googlegroups.com
>
> <https://groups.google.com/d/msgid/elixir-lang-talk/c4f742f9-6a42-4742-b6cb-db26d8cd80da%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
>
>
--
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/elixir-lang-talk/5c5b8aee-b708-45a4-9e2e-76c58113a898%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
