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?

Solution 1

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.

Solution 2

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

Comments

[Side]

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]

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

[Athan Clark]

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]

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

What does it mean to be "AMD aware"?

[HPWD]

Perfect answer, thank you. I was unable to find it a clear definition.