using jquery plugin in browserify along with angular

Question

I am trying to use a tooltip plugin called tipso. And I am using angular along with browserify as my dependency manager.

I have everything working out for me except for this plugin. Every little thing is little harder in browserify but this one seems to be turning into a nightmare.

I have followed the documentation of tipso which is pretty simple. But when I run the app, I keep getting an error message stating that Uncaught TypeError: $(...).tipso is not a function in the chrome console.

This is my broserify-shim config

   "browserify-shim": {
   "jquery": "$",
   "bootstrap": {
     "depends": [
       "jquery"
     ]
   },
   "tipso": {
       "depends": [
           "bootstrap"
       ]
    }
  }

I have required tipso

var tipso = require('tipso');

This is how I have initialized tipso

//runs when DOM is completely loaded
angular.element(document).ready(function ($http, $rootScope) {    
    $('.tipso').tipso();
});

Any suggestion will be appreciated.

Giridhar Karnik · Accepted Answer · 2016-05-07 13:49:42Z

1

I finally figured it out, I hope this helps someone.

The trick is to expose jQuery in the global scope (I know I am not supposed to do this and the alternative for this is to expose it wherever I want the plugin to work).
```
global.$ = global.jQuery = require('jquery');
```

Once that is done, we'll make an Angular directive

rootModule.directive('cooltip', function () {
  return {
      restrict: 'A',
      link: function (scope, element, attributes) {
          $(element).tipso({
              position: 'right',
              delay: 600
        });
      }
   };
});

Use this directive to use apply the jQuery plugin's properties on an element in html
```
<button cooltip class="btn"> Hover over me </button>
```

Depending on the jQuery plugin and it;s funtionality decide on the directive type (Element, Attribute, Comment etc).

answered May 7, 2016 at 13:49

Giridhar Karnik

2,3736 gold badges30 silver badges51 bronze badges

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

Comments

YPCrumble · Accepted Answer · 2016-04-29 17:50:00Z

0

If you're using it like $(...).tipso per the error, and you're requiring jQuery as $ per your Browserify Shim config, I'm assuming Tipso is a jQuery plugin. You need to specify that this it depends on jQuery, like so:

 "browserify-shim": {
   "jquery": "$",
   "bootstrap": {
     "depends": [
       "jquery"
     ]
   },
   "tipso": {
       "depends": [
           "jquery",
           "bootstrap"
       ],
    "exports": "$.fn.tipso"
    }
  }

edited Apr 29, 2016 at 17:50

answered Apr 29, 2016 at 15:13

YPCrumble

29.1k26 gold badges115 silver badges177 bronze badges

4 Comments

Giridhar Karnik Over a year ago

Same thing, as mentioned in the question, the global namespace is not polluted, I checked by typing in $ in chrome console.

YPCrumble Over a year ago

Try explicitly exporting the plugin per my update. I have one more idea if that doesn't work. Sometimes these are a little touchy which is a terrible way to think as a programmer but I don't know Browserify Shim yet well enough to know a better solution offhand :).

YPCrumble Over a year ago

If you want to pollute your global namespace you need to do that explicitly in your build, like window.$ = require('jquery'); require('tipso');

Giridhar Karnik Over a year ago

I am totally surprised and slightly scared that about the no of views a question gets on stack overflow these days...

Collectives™ on Stack Overflow

using jquery plugin in browserify along with angular

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related