Loading two script blocks (using lab.js as a load manager)

Question

I'm trying to load two blocks of lab.js in different places but if I use functions in the second block from files loaded in the first block, they show as undefined.

This is the first block (loaded in the header template from my MVC project

<script>
$LAB
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/jquery-1.10.2.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>bootstrap/js/bootstrap.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>bootstrap/js/bootstrap-datepicker.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/underscore-min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/underscore.date.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/backbone-min.js").wait(function(){
    $(document).ready(function(){
        alert("loaded");
    });
});
</script>

this is the second block loaded at a content template

$LAB
.script("../scripts/jquery-1.10.2.min.js").wait(function(){
    $(document).ready(function(){

        $(".test-badges").each(function( index ) {
            $( this ).tooltip({
              'show':true,
              'placement': 'bottom',
              'title' : 'Marca esta casilla si consideras que tu compañer@ debe responder igual.'
            });

        });
    });
});

The functions from second block (.tooltip) are not loaded because they are a dependancy from jquery. There is no way to unify both blocks in just a block loaded in header (both files are completly independent and have content created dynamically, also it's not what I'm trying to achieve)

So the question is .. Is there a way to tell the second block to only load when the first block is completly loaded?

Many thanks!

Answer 1

I think the problem is that you are creating two separate $LAB chains and that what you want can be achieved by storing a reference to your $LAB chain and chaining your last call to the end, like so:

First block:

<script>
var chain = $LAB
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/jquery-1.10.2.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>bootstrap/js/bootstrap.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>bootstrap/js/bootstrap-datepicker.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/underscore-min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/underscore.date.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/backbone-min.js")
</script>

Second block:

chain.wait(function(){
    $(document).ready(function(){

        $(".test-badges").each(function( index ) {
            $( this ).tooltip({
              'show':true,
              'placement': 'bottom',
              'title' : 'Marca esta casilla si consideras que tu compañer@ debe responder igual.'
            });
        });
    });
});