Question

I’m following this tutorial on building a widget

IN that tutorial, he’s testing whether jquery exists on the page and, if not, loading it.

I’ve recreated his code in this fiddle

I’ve added another object, CssLoader, but I’m unable to use jquery inside that object. You can see that my alert is not working.

How should I ensure jquery is available in CssLoader and any other objects I create?

Answer 1

I’ve just tweaked your code

var CssLoader = (function(){
    var $=''; //the global $ inside CssLoader
    function init($, cssPathArray){ // Receive the jquery in the first argument
        $=jq; // assign jQuery to global $, so it'll be available inside CssLoader
        alert( $('body') );            
    }

    return {
        init : init
    };
})();

And inside function main call CssLoader.init as follows

CssLoader.init($, ['cssPath1', 'cssPath2']); // Pass the jquery in the first argument

DEMO.