CODEWITHSUNDEEP
javascriptjqueryrequirejscdn
Side
Side

Reputation: 1751

require js loading scripts from cdn fail

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

My code:

// 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 fails to 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();

Could please someone point out what I am doing wrong?

P.S: I am defining the site URL because I am using Laravel, without that definition it includes the URL segments in the base URL.

Upvotes: 4

Views: 8478

Answers (3)

vincentlcy
vincentlcy

Reputation: 1217

Brandon is correct, while I think shim could not solve the problem

From RequireJS Doc:

Do not mix CDN loading with shim config in a build. Example scenario: you load jQuery from the CDN but use the shim config to load something like the stock version of Backbone that depends on jQuery. When you do the build, be sure to inline jQuery in the built file and do not load it from the CDN. Otherwise, Backbone will be inlined in the built file and it will execute before the CDN-loaded jQuery will load. This is because the shim config just delays loading of the files until dependencies are loaded, but does not do any auto-wrapping of define. After a build, the dependencies are already inlined, the shim config cannot delay execution of the non-define()'d code until later. define()'d modules do work with CDN loaded code after a build because they properly wrap their source in define factory function that will not execute until dependencies are loaded. So the lesson: shim config is a stop-gap measure for non-modular code, legacy code. define()'d modules are better.

In short, I believe when you have modules that are not requirejs and they depend on some other modules (jQuery), you won't be able to use jQuery from CDN inside RequireJS.

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

Upvotes: 4

Brandon
Brandon

Reputation: 937

This is because the 'chosen' library you are referencing requires jQuery to be defined. RequireJS does not load the dependencies for a given module in a guaranteed order. It loads them in parallel. This is for performance reasons. So if you wanted jQuery to load first, you could:

  • require jquery directly on the page, so it gets loaded before any of the AMD stuff starts

-or-

  • create a wrapper module around 'chosen' which lists jQuery as a dependency

Personally, I opt for the first choice. I see no benefit to loading jQuery via AMD, since every page requires it, and many libs depend on it. There's no reason to lazy load something you always need.

EDIT:

Looks like you could also use RequireJS's shim functionality to do this:

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

You'd need to define a shim for 'chosen' and list jQuery and whatever other libraries as its dependencies.

Upvotes: 2

Partha Pal
Partha Pal

Reputation: 328

$(document).ready({

   //all your jquery code should go here
});

want to know why? see this

Upvotes: -5

Related Questions