Dependencies not loaded in time

[owzzz]

Hi, So I'm running the following code:

    $script.path('assets/js/');
    //Load in dependencies
    $script(['libs/angular/angular.min', 'libs/jquery/jquery.min', 'libs/Responder/responder.min'], 'BaseFilesLoaded');
    //When dependecies are loaded run the main application code
    $script.ready('BaseFilesLoaded', function() {
        //Cache Dome elements
        var $body = $('body');


        // Responder is a jQuery plugin to add classes and trigger events based on defined break points (screen resolutions). 
        // https://github.com/Lane/Responder
        $body.responder();
    });

But I'm getting the following errors:

Uncaught ReferenceError: jQuery is not defined
Uncaught TypeError: Object [object Object] has no method 'responder'

This seems to suggest that despite the code being in the ready callback function, the files have still not loaded in. I hit refresh several times and the errors are intermittent.

Any idea how I can make sure the "ready" code does not get run until the dependencies are loaded in correctly?

[gocom]

libs/Responder/responder.min.js itself requires jQuery, in addition to your callback function. The dependencies you list are not loaded in order; it's asynchronous.

As instructed in the readme, you will have to wrap the plugin code itself (yes, the whole file) to $script.ready('BaseFilesLoaded', fn); too. Alternatively, you can load your plugins that depend on jQuery after jQuery, but that then defeats the point of an asynchronous loader.

The "ready code" does always get run after the files have been loaded. It's just that your dependencies have dependencies too. The errors itself can not originate from your callback itself even; for one, you aren't referencing jQuery named variable, and second, always look at the trace.

[robertlagrant]

@gocom - that sort of makes sense, except the readme has this example:

// load jquery and plugin at the same time. name it 'bundle'
$script(['jquery.js', 'my-jquery-plugin.js'], 'bundle');

This implies magical dependency resolution, which doesn't sound right, but on the other hand it is in the readme. Not sure what's going on here?

EDIT: sorry, I think I see what you're saying now: you have to go into the my-jquery.plugin.js file and wrap it with $script.ready. Other than being a bit unmaintainable and less likely to manage a cache hit, how do we include library files from CDNs?

[ded]

hey guys, i've been bad at responding to a number of things lately and really need a new maintainer for this repo (the code is still good, i promise ;)

unfortunately it's a bit tougher when you have established code (like jQuery) directly on a CDN already. if you hosted your own jQuery, you could add concat a line at the bottom of the file that says $script.done('jquery')

In your jquery-plugin.js you can wrap your script in $script.ready('jquery', function () { ... })

[ded]

If editing your version of jQuery is not an option, do as the readme says:

$script(['cdn.google.com/jquery.js', 'my-jquery-plugin.js'], 'bundle')

and in my-jquery-plugin.js ...

$script.ready('bundle', function () {
  jQuery.fn.plugin = function () {}
})