Using jQuery with Aurelia

Question

I have an Aurelia application and in app.js I want to use jQuery.

So my config.js looks like this:

System.config({ ... map: { ... "jquery": "npm: jquery@2.2.0 ", ... } } 

And in app.js, I import jQuery as follows:

 var $ = require('jquery'); 

But when I demand it, I get an empty site. The same thing happened with import:

 import $ from 'jquery'; 

What's wrong?

thanks

EDIT: OK, decided. The problem is that jQuery code must be called inside the attached () mehtod. So like this:

 export class Class1 { attached() { //jQuery code here } } 

Answer 1

You need to install jquery from https://github.com/components/jquery

But if you use aurelia-skeleton, you can import it from bootstrap

 import 'bootstrap'; 

and then use $ everywhere in the application or

 import $ from 'bootstrap' 

The same goes for jqueryui. If necessary, get it from https://github.com/components/jqueryui

Answer 2

Just be different! We use jQuery, and I tried to add it through config.js and use import, etc., which worked fine. But we also use a couple of js libraries that we load using the script tag on the html main page, and this requires jquery. I tried to load them using import, too, but they were not intended for this, and it just got too complicated, so in the end we just made life very simple:

tag

script for jquery on html main page

script tag from third-party js libraries on the html main page

work is done!

It also has the potential benefit of being able to load both jquery and libraries from CDN if you want.

You may lose the benefits of loading modules through import, but we use both jquery and other libraries throughout the application, so we don’t lose, and I don’t forget to import them when creating a new module :-)

Answer 3

jquery is installed in \ jspm_packages \ github \ components (at least in my case). If this is your case, you should use:

 System.config({ ... map: { ... "jquery": "github:components/ jquery@2.2.0 ", ... } } 

Link to Example in plunker .