Requires loading js scripts from cdn fail

Question

I am new to RequireJS, and for some reason I cannot load scripts via CDN.

My code is:

// site full url var siteUrl = window.location.protocol+"//"+window.location.host + "/fresh/"; // requirejs config requirejs.config({ baseUrl: siteUrl + "assets/js/", paths: { "plugins": "plugins", "scripts": "scripts", "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min", "jquery-ui": "https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min", "bootstrap": "https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min", } }); require(['jquery', 'jquery-ui', 'bootstrap', 'plugins/chosen'], function($, chosen){ /* loading global selectors and variables */ //chosen for select boxes $(".chzn-select").chosen(); }); 

and jquery does not load. I get the following errors:

 ReferenceError: jQuery is not defined [Megszakítás ennél a hibánál] ...h"):this.container.removeClass("chzn-container-single-nosearch")),e="",s=this.re... chosen.js (1. sor) ReferenceError: jQuery is not defined TypeError: $(...).chosen is not a function $(".chzn-select").chosen(); 

Can someone point out what I'm doing wrong?

PS: I am defining the website URL because I use Laravel, without this definition it includes the URLs in the base URL.

Answer 1

Brandon is right, although I think the gasket cannot solve the problem.

From RequireJS Doc :

Do not mix CDN boot with gasket configuration in assembly. Example scenario: you download jQuery from a CDN, but use the shim configuration to load something like a version with a base that depends on jQuery. When you build, be sure to embed jQuery in the embedded file and do not load it from the CDN. Otherwise, Backbone will be embedded in the embedded file, and it will run until the downloaded CDNQ jQuery is loaded. This is because the strip configuration simply delays the loading of files until dependencies are loaded, but does not automatically package the definition. After the build, the dependencies are already built in, the configuration of the strip cannot delay the execution of the code until define() 'd is completed. The define() 'd modules work with the loaded CDN code after the build, because they correctly wrap their source in the define factory function, which will not be executed until the dependencies are loaded. So, a lesson: shim config is a stop-hall measure for non-modular code, outdated code. define() 'd modules are better.

In short, I believe that when you have modules that are not required, and they depend on some other modules (jQuery), you cannot use jQuery from the CDN inside RequireJS.

In this case, I agree with what Brandon suggested, requiring them directly on the page, could be better.

Answer 2

This is because you must define jQuery for the library of your choice. RequireJS does not load dependencies for this module in a guaranteed manner. He loads them in parallel. This is for performance reasons. Therefore, if you want to download jQuery first, you can:

• jquery is required directly on the page, so it loads before any of the AMD files runs.

-or -

• create a wrapper module around 'selected' that displays jQuery as a dependency

Personally, I choose the first choice. I do not see any benefit from downloading jQuery via AMD, as each page requires it, and a lot of lib depends on it. There is no reason for lazy loading what you always need.

EDIT:

It looks like you could also use RequireJS padding functions for this:

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

You will need to define a padding for 'selected' and list jQuery and any other libraries as its dependencies.

Answer 3

 $(document).ready({ //all your jquery code should go here }); 

want to know why? see this