To AMD or not to AMD

….that is the question. This is a key point when using 3rd party javascript libraries with Generico and Video Easy. And it also has implications when using JQuery. Lets take a step back though, and first explain what AMD is.

What is AMD?

AMD is asynchronous module definition. It is a standard way of loading javascript in modules, that declare their dependency on other AMD modules. The AMD implementation (in the case of Moodle this is require.js) will figure out what needs to be loaded first and make sure everything loads up in the correct sequence without clashing with anything else. If you have ever encountered problems with wordpress plugins and jquery version clashes, you might have some insight into the problems that AMD was designed to avoid.

What does this mean for Generico/Video Easy?

If there is any javascript in your template, and there is in most templates, then Generico/Video Easy has to decide how to load it. If Moodle version is older than 2.9, then it will just get loaded in the non AMD way and the conversation is over. If however it is Moodle 2.9 or greater, we default to loading the javascript in AMD modules.

Generico will package any custom JS you enter into an AMD module if the template’s “Load via AMD” option is checked. But if you use a 3rd party library and that library doesn’t support AMD, then this will cause an error and your template will break. In your browser console, you might have a “no define call” error that will look like this:

Usually you can’t tell in advance if this will be the case. And usually 3rd party libraries don’t support AMD. (You have been warned.) Its no problem though, you just uncheck “Load via AMD” in the template and that should fix it.

What about JQuery?

JQuery comes free with AMD in Moodle. You can just assume it is there and access it in the normal way e.g $(‘#mythungy’).click(blah blah blah);

If you are not using AMD though, you may or may not have jquery available. It depends on other things happening on the page, and on your theme. If your theme does not load jQuery, and you try to use it, you may get errors like this in your browser console:

In this case  I recommend you load jQuery via your site’s additional html area (site admin -> appearance ->Additional html -> Within HEAD). Like this:

What about the “Requires jQuery” thing here on the template

That was a misguided attempt to make jQuery available to 3rd party javascript libraries that expected it.
You really should never check it. What can happen if you do, is that template A loads jquery into the global namespace and adds some plugins to it. Then template B loads jQuery again and overwrites what template A did. Then you wonder why the heck template A works on one page, but not another. To avoid this, use a theme that loads jquery or add it to the additional html area as described above.