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?

Jadam · Accepted Answer · 2015-03-19 18:00:31Z

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, 2015 at 18:00

Jadam

1,8271 gold badge24 silver badges42 bronze badges

answered Aug 26, 2014 at 4:41

RunLoop

20.2k22 gold badges105 silver badges159 bronze badges

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

2 Comments

Michael Over a year ago

You can also use ember install:bower jquery-ui instead of bower install --save jquery-ui.

lft93ryt Over a year ago

While writing test cases, do I import jQuery UI in test files after adding it to Brocfile.js ?

thecodejack · Accepted Answer · 2014-08-21 13:23:42Z

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, 2014 at 13:23

thecodejack

13.5k11 gold badges47 silver badges59 bronze badges

4 Comments

RunLoop Over a year ago

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?

Leeft Over a year ago

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.

RunLoop Over a year ago

@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?

lft93ryt Over a year ago

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.

Unheilig · Accepted Answer · 2015-06-09 00:18:52Z

0

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

edited Jun 9, 2015 at 0:18

Unheilig

16.3k193 gold badges71 silver badges101 bronze badges

answered Jun 8, 2015 at 23:53

iamalex

611 silver badge4 bronze badges

Collectives™ on Stack Overflow

Using jquery in Ember-cli

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related