head.js and jQuery $.noConflict() not Working as Expected

764 Views Asked by At

I'm trying to figure out why this works:

<script src="js/head.js"></script>
<script>head.js(<import-several-libraries-here>);</script>

<script src="code.jquery.com/jquery-1.8.3.js"></script>
<script src="code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<script>
    var j183 = $.noConflict(true);
</script>

but these don't:

<script src="js/head.js"></script>

<script>
    head.js(<import-several-libraries-here>);
    head.js("http://code.jquery.com/jquery-1.8.3.js");
    head.js("http://code.jquery.com/ui/1.9.2/jquery-ui.js");

    var j183 = $.noConflict(true);
</script>

AND

<script src="js/head.js"></script>

<script>
    head.js(<import-several-libraries-here>);
    head.js("http://code.jquery.com/jquery-1.8.3.js");
    head.js("http://code.jquery.com/ui/1.9.2/jquery-ui.js");
</script>

<script>
    var j183 = $.noConflict(true);
</script>

I've read this and tried variations, to no avail:

HeadJS and jQuery Usage

UPDATE

I tried a suggested answer:

head.js("http://code.jquery.com/ui/1.9.2/jquery-ui.js");
head.js("http://code.jquery.com/jquery-1.8.3.js", function() {
            var j183 = $.noConflict(true);
        });

and it didn't work.

2

There are 2 best solutions below

3
On BEST ANSWER

According to http://headjs.com/

Maybe you should try something like this which will load the two jQuery libraries, and then call the anonymous function, which re-assigns the jQuery library to the global variable for use later.

<script src="js/head.js"></script>

<script>
    head.js(<import-several-libraries-here>);

    head.js("http://code.jquery.com/jquery-1.8.3.js", 
            "http://code.jquery.com/ui/1.9.2/jquery-ui.js", function() {

         window.j183 = $.noConflict(true);

         head.js(<import-several-libraries-here>, function(){
            init();
         });  //that depend on j183

    });

    function init(){
         var $ = window.j183;

         $('body').each(function(){
             //do something
         });

         j183('body').each(function(){
             //do something else
         });

    }
</script>

Updated: to show how to init the library.

2
On

You need to execute any code that relies on dependencies load via head.js in a callback:

head.js("/path/to/jquery.js", function() {

   var j183 = $.noConflict(true);

});