How to use jQuery in new Javascript API

1

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

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

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

and

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

I have used it like

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

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

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.

3

I am upgrading my “very huge application” :smiley: 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

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.

4

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

5

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

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

by adding it to eslint rules

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

BTW, I am using rules from Airbnb

6

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:

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 :slight_smile: