loading jquery plugins with require js

Question

I am new to require js, and the problem is I don't really understand how to load jQuery plugins.

I would like to load multiple plugins but I already have problems with the first one, with the chose plugin

js

//site full url
var siteUrl = window.location.protocol+"//"+window.location.host + "/";

requirejs.config({
    baseUrl: siteUrl + "assets/js",

    paths: {
        "jquery": "libs/jquery",
        "jquery-ui": "libs/jquery-ui",
        "bootstrap": "libs/bootstrap",
        "scripts": "scripts",
        "plugins": "plugins",
    }, 
});

requirejs(['jquery', 'jquery-ui', 'bootstrap', 'plugins/chosen'],
function($, chosen){
    $('.chzn-select').chosen();
});

my test html

<select data-placeholder="Choose a country..." style="width:350px;" class="chzn-select">
    <option value="">Test</option>
    <option value="">Test</option>
    <option value="">Test</option>
</select>

and when I try to load it I get the following error

TypeError: $ is not a function


...tion(){"in"==self.hoverState&&self.show()},self.options.delay.show),void 0):self...

bootstrap.js (line 6)

TypeError: $(...).chosen is not a function


$('.chzn-select').chosen();

Could someone please point out what I am doing wrong?

Waxen · Accepted Answer · 2013-02-08 16:30:14Z

42

When you're loading your dependencies, requirejs loads them all concurrently. When you're getting that error, it means that your plugin is being loaded and executed before jQuery has been loaded. You need to set up a shim to tell requirejs that the plugin depends on jQuery already being loaded.

Also, most jQuery plugins are not AMD aware, so you'll also want to tell requirejs what to look for to tell it the script loaded correctly. You can do this with an 'exports' entry in your shim.

I don't believe jqueryUI is AMD-aware either, so an entry in the shim is probably in order for that too. I don't use bootstrap, so I'm not sure if you'll need anything there.

Here's a shim for your plugin and jQueryUI, add this to your call to requirejs.config:

shim: {
    'plugins\chosen': {
        deps: [ 'jquery' ],
        exports: 'jQuery.fn.chosen'
    },
    'jquery-ui': {
        deps: [ 'jquery' ],
        exports: 'jQuery.ui'
    }
}

You may still have some issues that I'm not seeing yet, but this should at least get you moving forward. Also, this is probably worth a read: http://requirejs.org/docs/api.html#config-shim. I would definitely recommend reading that whole page if you haven't yet.

edited Feb 8, 2013 at 16:30

answered Feb 7, 2013 at 17:28

Waxen

1,7822 gold badges29 silver badges30 bronze badges

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

6 Comments

Side Over a year ago

thanks for your reply, tried same errors, i am so lost with this, nothing works, i will just give it up, but thank you for your reply, EDIT: now a new error: TypeError: e.browser is undefined, nvm still thank you

Side Over a year ago

my bad, i had and error with the plugin actually, thanks for your help

Athan Clark Over a year ago

when using these plugins, would define(['jquery','jquery-ui','jquery-foo'], function ($,$.ui,$.foo) {...}); be a wise idea? How would we use these functions? Would the properties be automatically added to the first $?

Waxen Over a year ago

@AthanClark I wouldn't got so far as to say unwise, just unnecessary. The properties will still be added to jQuery as normal. When loading jQuery plugins (or really anything else that modifies an existing object) the reason to define an "exports" property isn't so much to get a reference to it, but rather so that requirejs can validate that the module loaded correctly. On a meta note - next time, instead of posting a comment on an old (nearly 2 years) answer, instead post a new question and include a link to the old question for context.

HPWD Over a year ago

What does it mean to be "AMD aware"?

|

Hitesh Modha · Accepted Answer · 2016-03-31 10:14:29Z

Hi I will like to tell you here that if you want to include non AMD scripts (which do not include define() call) , we use shim config . I will like to explain with a simple example of jquery hightlight plugin.

this will be your config file where you define all paths

paths:{
    "jquery":"/path/to/jquery",
    "jgHighlight":"/path/to/jquery.highlight"
},
   shim:{

        deps:["jquery"], // jquery.highlight dependeps on jquery so it will load after jquery has been loaded 
        exports:"jqHighlight"

   }

Now in a module which starts with define , include jqHighlight like this

define(["requireModulesArray","jgHighlight"],function(requiredModulesAliasArray){

   // no need to include any alias for jgHighlight in function(...)
   //use it like this now

     $("#divT").highlight("someText");

});

Similarly other non amd modules will be included and used. Thanks

Collectives™ on Stack Overflow

loading jquery plugins with require js

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related