I had a simple tooltip component created from bootstrap tooltip. It stoped working when upgraded to ember 2.11
here is the component:
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'img',
src: '../images/help-icon.png',
alt: 'img',
classNames: ['help-ico'],
dataPlacement:'right',
dataToggle: 'tooltip',
title: '',
attributeBindings: ['src', 'alt', 'title'],
didInsertElement(){
this._super(...arguments);
// call bootstrap tooltip
this.$().tooltip();
}
});
I am getting below error
Uncaught TypeError: this.$(...).tooltip is not a function
at Class.didInsertElement (tool-tip.js:19)
at Class.superWrapper [as didInsertElement] (ember.debug.js:40426)
at Class.trigger (ember.debug.js:42261)
at Class.superWrapper [as trigger] (ember.debug.js:40426)
at CurlyComponentManager.didCreate (ember.debug.js:12728)
at Environment.commit (ember.debug.js:50906)
at Environment.commit (ember.debug.js:9282)
at InteractiveRenderer._renderRoots (ember.debug.js:12124)
at InteractiveRenderer._renderRootsTransaction (ember.debug.js:12153)
at InteractiveRenderer._renderRoot (ember.debug.js:12074)
I noticed that same error is coming for all components created from third party libraries.
I have included bootstrap as bower dependency and loading it into project from ember-cli-build.js as shown below
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
});
//include selects css
app.import('bower_components/select2/dist/css/select2.css');
// croper js CSS
app.import('bower_components/cropperjs/dist/cropper.css');
// range slider css
app.import('bower_components/ionrangeslider/css/ion.rangeSlider.css');
//import jquery
app.import('bower_components/jquery/dist/jquery.js');
//import bootstrap js
app.import('bower_components/bootstrap/dist/js/bootstrap.js');
//import map info box
app.import('vendor/map/infobox.js');
//import markerwithlabel for map
app.import('vendor/map/markerwithlabel.js');
app.import('vendor/sliderplugin/ninja-slider.js');
app.import('vendor/sliderplugin/thumbnail-slider.js');
//import twitter typeahead with bloodhound
app.import('bower_components/http://ift.tt/1rsyzAh');
//include momemt js
app.import('bower_components/moment/moment.js');
//include selects
app.import('bower_components/select2/dist/js/select2.js');
//import template compiler
app.import('vendor/ember/ember-template-compiler.js');
//noty
app.import('bower_components/noty/js/noty/packaged/jquery.noty.packaged.js');
// Swal
app.import('bower_components/sweetalert/dist/sweetalert.css');
app.import('bower_components/sweetalert/dist/sweetalert.min.js');
// croper js JS
app.import('bower_components/cropperjs/dist/cropper.js');
// geocomplete jquery plugin
app.import('bower_components/geocomplete/jquery.geocomplete.js');
// range slider
app.import('bower_components/ionrangeslider/js/ion.rangeSlider.js');
// range slider custome images and theme
app.import('vendor/range-slider/img/sprite-skin-nice.png', {
destDir: 'img'
});
return app.toTree();
};
Thanks for your help.
Thanks, Ravindra
Aucun commentaire:
Enregistrer un commentaire