Requiring a javascript module without using Moodle's output code

Requiring a javascript module without using Moodle's output code

by Conn Warwicker -
Number of replies: 0
Picture of Core developers Picture of Plugin developers

Hi,

I have a plugin which uses its own html/css template, and as such doesn't include any of the Moodle header, footer, etc...

However, I need to access a variable which is created inside the AMD module of one of my blocks.

I am trying to work out which bits I need to put into the template in order for it to load with requirejs.

So far I've put this, after my body tag:

<!-- Require JS -->
<script type="text/javascript">

var M = {};
M.cfg = {};
M.cfg.wwwroot = '<?= $CFG->wwwroot ?>';

var require = {
baseUrl : '<?= $CFG->wwwroot ?>/lib/requirejs.php/-1/',
// We only support AMD modules with an explicit define() statement.
enforceDefine: true,
skipDataMain: true,
waitSeconds : 0,

paths: {
jquery: '<?= $CFG->wwwroot ?>/lib/javascript.php/-1/lib/jquery/jquery-3.2.1.min',
jqueryui: '<?= $CFG->wwwroot ?>/lib/javascript.php/-1/lib/jquery/ui-1.12.1/jquery-ui.min',
jqueryprivate: '<?= $CFG->wwwroot ?>/lib/javascript.php/-1/lib/requirejs/jquery-private',
block_elbp : '<?= $CFG->wwwroot ?>/blocks/elbp/amd/src'
},

// Custom jquery config map.
map: {
// '*' means all modules will get 'jqueryprivate'
// for their 'jquery' dependency.
'*': { jquery: 'jqueryprivate' },
// Stub module for 'process'. This is a workaround for a bug in MathJax (see MDL-60458).
'*': { process: 'core/first' },

// 'jquery-private' wants the real jQuery module
// though. If this line was not here, there would
// be an unresolvable cyclic dependency.
jqueryprivate: { jquery: 'jquery' }
}
};

</script>
<script type="text/javascript" src="<?= $CFG->wwwroot ?>/lib/javascript.php/-1/lib/requirejs/require.js"></script>
<script type="text/javascript">

require(["block_elbp/scripts"], function (amd) {
amd.init();
});

</script>

It gets as far as loading up the scripts.js file in my block, and it also loads the config.js file and the .js files of the plugins which are included within scripts.js:


define(['jquery', 'jqueryui', 'block_elbp/minicolors', 'block_elbp/raty', 'block_elbp/tinytbl', 'block_elbp/fileupload'], function($, ui, miniColors, raty, tinytbl, fileupload) {

However, I am just getting:

Uncaught Error: No define call for minicolors

Uncaught Error: No define call for tinytbl

etc... For all the plugins referenced in scripts.js


I assume I am missing something, but I'm not sure what. Does anyone know what else I need to include/do to get the modules to load?


Edit: I can get it to work by changing  enforceDefine to false, but that then breaks all my other scripts, included with normal script tags.


Thanks.

Average of ratings: -