CODEWITHSUNDEEP
jqueryrequirejs
FlimFlam
FlimFlam

Reputation: 493

Requirejs loading plugins

I'm trying to load a plugin using requirejs but occasionally get an error, "$.fn is undefined" but if I reload the page the error disappears almost like now jquery is cached the problem is removed. I'm loading my libraries like this:

require(["jquery-1.4", "/script/jquery.autoSuggest.packed.js"], function($) {
   $(function() {
       //code
    });
});

Can you see if there is anything wrong with this implementation that would cause this error? Require js is being added to the page as so:

<script type="text/javascript" src="http://website.co.uk/frameworks/requirejs/0.2.4/sharedmodules/require.js">
</script> 
<script type="text/javascript">  requireMap = {
     "jquery-1.4":"http://website.co.uk/sharedmodules/jquery-1.4"
}; 

    require({ baseUrl: 'http://website.co.uk/', paths: requireMap });      
</script>

This can't be changed as it's part of the framework I'm using.

Any suggestions?

Thanks!

Upvotes: 13

Views: 11778

Answers (3)

jrburke
jrburke

Reputation: 6766

You will want to use the order plugin. By default RequireJS loads scripts as fast as possible, and they can load out of order. However, the order plugin will maintain the order of the script loads.

If you use the optimizer to optimizer your scripts, be sure to include both jQuery and the plugin in the optimized script.

Upvotes: 8

kongaraju
kongaraju

Reputation: 9596

order plugin is removed. use shim loading as follows

requirejs.config({
   paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min',
        'bootstrap': '../bootstrap/js/bootstrap.min',
        'select2': 'vendor/select2',
        'jshashtable': 'vendor/jshashtable-2.1',
        'jquery.numberformatter': 'vendor/jquery.numberformatter-1.2.3.min',
        'jq-datepicker': 'vendor/bootstrap-datepicker',
        'jq-datepicker.da': 'vendor/bootstrap-datepicker.da'
    }, 

    // Use shim for plugins that does not support AMD
    shim: {
        'bootstrap': ['jquery'],
        'select2': ['jquery'],
        'jq-datepicker': ['jquery'],
        'jshashtable': ['jquery'],
        'jquery.numberformatter': ['jquery', 'jshashtable']
    },

});

reference : http://requirejs.org/docs/api.html#config-shim

Upvotes: 12

troynt
troynt

Reputation: 1912

You may want to checkout https://github.com/jquery-boilerplate/patterns

It has some good boilerplate jQuery plugin code that will work with RequireJS.

I think you may have to upgrade your jQuery to 1.7 before these patterns will work for you.

Upvotes: 3

Related Questions