# How to use jQuery in new Javascript API

**URL:** <https://discuss.emberjs.com/t/how-to-use-jquery-in-new-javascript-api/13938>\
**Category:** Uncategorized\
**Created:** [November 30, 2017, 7:42am UTC](https://discuss.emberjs.com/t/how-to-use-jquery-in-new-javascript-api/13938 "2017-11-30T07:42:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![aamirrajpoot](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/aamirrajpoot/32/10720_2.png) [@aamirrajpoot](https://discuss.emberjs.com/u/aamirrajpoot)\
**Post date:** [November 30, 2017, 7:42am UTC](https://discuss.emberjs.com/t/how-to-use-jquery-in-new-javascript-api/13938/1 "2017-11-30T07:42:07Z")

</div>

I have been using jQuery for various small things like datepicker and reveal modals and animations in my application, now. I ran ember-modules-codemod and all of my files (800+) are updated.

That also changed jQuery imports. I have been using `Ember.$(` for Global level and `this.$(` for component level .

What are my options and how I can keep both of them working.

Right now

```auto
import Ember from 'ember';
const {$} = Ember;

// `error Use import $ from 'jquery'; instead of using Ember destructuring ember/new-module-imports` 

```

and

```auto
import $ from 'jquery';
// `error Do not use global `$` or `jQuery` ember/no-global-jquery`

```

I have used it like

```auto
Ember.$(body).addClass('blurBG'); // to blur out whole page under the popup

this.$().autocomplete(); // implement jquery autocomplete on a textfield

```

---

<div class="post-metadata">

**Author:** ![locks](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/locks/32/3878_2.png) [@locks](https://discuss.emberjs.com/u/locks)\
**Post date:** [November 30, 2017, 8:20am UTC](https://discuss.emberjs.com/t/how-to-use-jquery-in-new-javascript-api/13938/2 "2017-11-30T08:20:27Z")

</div>

The last code snippet is correct, it should be `import $ from 'jquery';`. `this.$()` is unrelated and used the same way.

What is giving you this error, JSHint? It sounds like something needs to be updated to a version that understands ES2015 modules.

---

<div class="post-metadata">

**Author:** ![aamirrajpoot](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/aamirrajpoot/32/10720_2.png) [@aamirrajpoot](https://discuss.emberjs.com/u/aamirrajpoot)\
**Post date:** [November 30, 2017, 8:27am UTC](https://discuss.emberjs.com/t/how-to-use-jquery-in-new-javascript-api/13938/3 "2017-11-30T08:27:05Z")

</div>

I am upgrading my “very huge application” 😃 which i started in Ember 0.7 version. Updated it to latest Ember 2.16.

Error is due to `eslint-plugin-ember` package and there is no compiling error just linting. As `ember-modules-codemod` modified my whole codebase I was not sure what should I do with my jquery stuff.

I have created a blank project and tested what you suggested. seems working fine. Below is my test component

```auto
import $ from 'jquery';
import Component from '@ember/component';

export default Component.extend({
  didInsertElement() {
    this.$().css({'background-color': 'red'});
    $('body').css({'background-color': 'blue'});
  },
});

```

Thanks @locks you are a champ.

---

<div class="post-metadata">

**Author:** ![locks](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/locks/32/3878_2.png) [@locks](https://discuss.emberjs.com/u/locks)\
**Post date:** [November 30, 2017, 8:44am UTC](https://discuss.emberjs.com/t/how-to-use-jquery-in-new-javascript-api/13938/4 "2017-11-30T08:44:29Z")

</div>

Glad to help! And good luck with the upgrade, 0.7 was… some time ago 😂

---

<div class="post-metadata">

**Author:** ![aamirrajpoot](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/aamirrajpoot/32/10720_2.png) [@aamirrajpoot](https://discuss.emberjs.com/u/aamirrajpoot)\
**Post date:** [November 30, 2017, 8:47am UTC](https://discuss.emberjs.com/t/how-to-use-jquery-in-new-javascript-api/13938/5 "2017-11-30T08:47:03Z")

</div>

hahaha yeah, but app is still in development and I have been keeping upto date so hardly one day job to update the code.

note: I have disabled this error

```auto
error Do not use global `$` or `jQuery` ember/no-global-jquery

```

by adding it to eslint rules

```auto
rules: {
        // disable global jquery error
        "ember/no-global-jquery": 0,
}

```

BTW, I am using rules from Airbnb

---

<div class="post-metadata">

**Author:** ![tschoartschi](https://avatars.discourse-cdn.com/v4/letter/t/f0a364/32.png) [@tschoartschi](https://discuss.emberjs.com/u/tschoartschi)\
**Post date:** [December 1, 2017, 8:29am UTC](https://discuss.emberjs.com/t/how-to-use-jquery-in-new-javascript-api/13938/6 "2017-12-01T08:29:39Z")

</div>

We have had the same “issue” but we decided to get rid of jQuery. We don’t need to support super old browser so it’s not that hard for us. There is no general solution for example you could replace the following code with:

> [@aamirrajpoot](#):
>
> Ember.$(body).addClass(‘blurBG’); // to blur out whole page under the popup

And the no jQuery version:

```
document.body.classList.add('blurBG')

```

Removing jQuery also reduces the payload of your app which is also a good thing 🙂