jquery deprecation question

[sullen nymph]

Hi, I am upgrading an old app from Ember 3.8 to 3.9. With this upgrade, ember-cli-update has upgraded @ember/jquery from 0.5.2 to 0.6.0. All of a sudden I am seeing errors saying Ember.$() has been deprecated, use import jQuery from 'jquery'. Anyone know why I'm getting this issue when I imported $ from jquery and am trying to do this.$('.foo')? Also this.$('.foo').datepicker from the jQuery ui library is undefined but if I do jQuery('foo').datepicker it doesn't come up as undefined.

[livid widget]

I'm also interestd in this. I'm trying to get a external script and Ember.$.getScripts it's working for me

[restive pelican]

so this.$ shouldn't really be used -- we got rid of it at some point (I think with the jquery-integration) -- inforamation on migration here: https://guides.emberjs.com/v3.12.0/configuring-ember/optional-features/#toc_jquery-integration

most jquery libraries (that install things on the $ prototype), are going to work best with import $ from 'jquery', rather than the old, ember-integrated this.$

in components extending from @ember/component, if you need an element reference, I believe this.element is available to you

and then to use datepicker without your imported $, you'd do:

$(this.element).datepicker...

[livid widget]

How do I load external scripts?

Oh i got it

[white trellis]

For reference, this is the deprecation guide https://deprecations.emberjs.com/v3.x#toc_jquery-apis It should be linked from the deprecation message.

For general upgrade advice, I'd recommend going straight from 3.8 to 3.12 then to 3.16.

[restive pelican]

for jquery stuff, since they document using <script> tags in the html, I'd do that and rely on CDN-served jquery plugins

straight from 3.8 to 3.12 then to 3.16.
clarification: these versions are "long term support" so the upgrade paths between tehse are smoother than going through each minor

[livid widget]

I actually just append a script tag to my document and it loads

[sullen nymph]

Thanks! I tried printing out $('.foo').datepicker(), but it comes out as Ember.$('.foo'). datepicker()

Also I saw your name again this time on SO @restive pelican lol https://stackoverflow.com/questions/74109466/why-this-is-not-available-in-ember-controller

[restive pelican]

I appear places

[sullen nymph]

Hi @restive pelican , this.$('.foo') used to just get that specific component's single element. That's now deprecated so if I do $('.foo') instead, it will get all elements with the foo class on the page. I guess this would be more of a jquery question, but any idea how I can just get the single element of the component instead of all on the page ? Bassically if I have multiple of that component on the page I will get an array of all those elements using $('.foo'), but I only want the one element in the component's hbs file

[restive pelican]

this.element.querySelector('.foo')?

[sullen nymph]

That will give me the element but won't work with datepicker since I think it's looking for a jquery object

[restive pelican]

right

[white trellis]

$ or jQuery takes a second argument with a context

[restive pelican]

but that can be passed to jquery

[white trellis]

jQuery('.foo', this.element) should work

[restive pelican]

oh nice, I didn't know it could do that

[white trellis]

@restive pelican Do you remember what version this.element arrived?

[restive pelican]

I thought you had to do $(this.element.querySelector('.foo'))

[white trellis]

the entire jquery api is permanently taking up space in my brain

[sullen nymph]

Ahh misunderstood, that works I think. Thanks again!

[sullen nymph]

Sorry to hear that 😦

[restive pelican]

in a quick check, I found it as far back as 2.13

[white trellis]

amazing, I would have thought it was much newer