1

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?

Community
  • 1
  • 1
Jordan Harris
  • 77
  • 10
  • 1
    You added the import to the brocfile right? and Ember.$ should work just fine – Patsy Issa Nov 19 '14 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 Nov 19 '14 at 22:36

2 Answers2

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.

Sam Selikoff
  • 12,366
  • 13
  • 58
  • 104
  • Still saying it's undefined. I'm at a loss for words... I appreciate your willingness to help me though. – Jordan Harris Nov 20 '14 at 03:32
  • 1
    Did you just try `this.$().tooltip()`? i.e. don't put a string in for selector – Sam Selikoff Nov 20 '14 at 03:47
  • 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 Nov 20 '14 at 07:42
  • 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... – Jordan Harris Nov 20 '14 at 07:49
  • 1
    have you restarted ember server? – Sam Selikoff Nov 20 '14 at 15:00
  • If you mean ctrl+c and then "ember server", yes. I've restarted it multiple times. I even hopped in the jQuery IRC to get support and nobody seemed to know anything about it. – Jordan Harris Nov 20 '14 at 20:40
  • Sam, I got the UI working; however, the theme import statement doesn't seem to be changing the look of the tooltip as demonstrated on the themeroller. Do I have to do somethign else? – Jordan Harris Nov 21 '14 at 00:08
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!

Jordan Harris
  • 77
  • 10