Using jquery in Ember-cli

Question

I am relatively new to both Ember.js and Ember-cli and would really appreciate some help please with using a jquery tooltip in a custom view. All code is below, but when my template is injected, I get the following console error:

[Error] TypeError: 'undefined' is not a function (evaluating 'Ember.$().tooltip()')

I am using a custom view in a file called tooltip.js:

import Ember from 'ember';

export default Ember.View.extend({

  tagName:  'span',
  title:  'The tooltip title',
  html: true,
  placement:  'top',
  didInsertElement: function(){
    Ember.$().tooltip({"html": this.get('html'),  
                                        "title":this.get('title'),
                                        "placement":this.get('placement'), 
                                        container: 'body'});

  }
});

The relevant template code is:

{{#view "tooltip" titleBinding="item" placement="right"}}<span><img class="app_info_icon" id="typeInfoIcon" src="/assets/images/info_icon.png"></img></span>{{/view}}

How can I fix this please?

score 10 · Accepted Answer · edited Mar 19 '15 at 18:00

10

Solved as follows:

Jquery's widgets etc. are not included in the standard jquery library which ember-cli uses. It has to be added using bower install --save jquery-ui
You then have to add the following lines to Brocfile.js:

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

As @Leeft pointed out, when referencing jQuery from a view or component this.$() should be used, not Ember.$()
Be sure to use a version of Ember-CLI after 0.40.

edited Mar 19 '15 at 18:00

Jadam

1,650
1
19
40

answered Aug 26 '14 at 04:41

RunLoop

20,288
21
96
151

You can also use `ember install:bower jquery-ui` instead of `bower install --save jquery-ui`. – Michael Jan 22 '15 at 00:16
While writing test cases, do I import jQuery UI in test files after adding it to Brocfile.js ? – lft93ryt Aug 01 '17 at 10:52

score 1 · Answer 2 · answered Aug 21 '14 at 13:23

1

There are some issues in the code but just regarding error, Its coz you need to import the tooltip library(js file) into ember-cli. It is done in brocfile.js before calling app.toTree() like below

app.import('vendor/tooltip.js');

Follow the link for more details. http://www.ember-cli.com/#managing-dependencies

answered Aug 21 '14 at 13:23

thecodejack

12,689
10
44
59

I thought that the tooltip is part of the standard jquery library? Also, would you please let me know what the other issues is in my code that you have noticed? – RunLoop Aug 21 '14 at 14:01
3

I spot one problem, `Ember.$().tooltip` rather than `this.$().tooltip()`. In a `View` or `Component` (Components are subclasses of Views) `this.$()` returns the jQuery element that was created by that view. `Ember.$().tooltip() would be talking to the root of the document instead. – Leeft Aug 21 '14 at 14:05
@Leeft thanks for your comment. I changed it to `this.$()` but the same error is still appearing. I also looked into @CodeJack's suggestion that I need to import tooltip.js, but I cant find it as a standalone lib as it appears to be part of the standard jquery library - am I correct in this or missing something? – RunLoop Aug 22 '14 at 06:51
Dependency Management in Ember CLI Ember CLI uses two package managers: Bower, for keeping front-end dependencies (including jQuery, Ember, and QUnit) up-to-date, and npm, for managing internal dependencies. You can use both package managers to introduce your own dependencies. – lft93ryt Aug 01 '17 at 10:49

score 0 · Answer 3 · edited Jun 09 '15 at 00:18

0

Try ember-cli tool-tipster.....works great.

edited Jun 09 '15 at 00:18

Unheilig

16,196
193
68
98

answered Jun 08 '15 at 23:53

iamalex

61
1
4

Using jquery in Ember-cli

3 Answers3

Linked