jQuery UI with Ember CLI

Question

So I'm pretty much having the exact problem listed here: Using jquery in Ember-cli

But I've already done the following as recommended in the thread above:

Added:

app.import('bower_components/jquery-ui/jquery-ui.js');
app.import('bower_components/jquery-ui/ui/tooltip.js');

Changed

Ember.$(selector).tooltip();

to

this.$(selector).tooltip();

Ember isn't recognizing the tooltip function as being defined despite UI being installed and doing the above.

Error:

Uncaught TypeError: undefined is not a function

Any help?

You added the import to the brocfile right? and Ember.$ should work just fine — Patsy Issa
– Patsy Issa, Commented Nov 19, 2014 at 21:01
@PatsyIssa Yeah, I did and before the export as one should. I've seen both -- people have said that for views and components that you should use this.$ but neither works... :\ — Jordan Harris
– Jordan Harris, Commented Nov 19, 2014 at 22:36

Sam Selikoff · Accepted Answer · 2014-11-20 01:32:20Z

5

A few things. First, jquery-ui.js is the entire jQuery UI library. So, you've already got tooltip in there. Remove that second line.

If you only want the tooltip, you'll need to import core, widget and position separately (reference), and then the tooltip.

Finally, you probably want to include a theme. The default one lives here:

app.import('bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css');

With that, stick the this.$().tooltip() in your view's didInsertElement callback and you should be good to go.

answered Nov 20, 2014 at 1:32

Sam Selikoff

12.8k13 gold badges61 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jordan Harris Over a year ago

Still saying it's undefined. I'm at a loss for words... I appreciate your willingness to help me though.

Sam Selikoff Over a year ago

Did you just try this.$().tooltip()? i.e. don't put a string in for selector

Jordan Harris Over a year ago

Good catch! I just changed that but it's still saying it's undefined. I can see the imports in my vendor.js file, but I cannot find any of the definitions (i.e. tooltip) in the global namespace when using the browser inspector. It makes no sense to me

Jordan Harris Over a year ago

I can see it defined in the UI js file here: var tooltip = $.widget( "ui.tooltip", { version: "1.11.2", options: { I just don't understand why it cannot find it...

Sam Selikoff Over a year ago

have you restarted ember server?

|

Jordan Harris · Accepted Answer · 2014-11-20 22:04:56Z

0

The problem was I had imported Ember Data which was causing an error (apparently it's imported by default or the options were stated incorrectly). Once I removed that, UI is now working properly.

Thank you for all your help Sam!

answered Nov 20, 2014 at 22:04

Jordan Harris

7710 bronze badges

Collectives™ on Stack Overflow

jQuery UI with Ember CLI

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related