General developer forum

I missed the css file so the code for PHP function will become like

function my_initialise_tabview(moodle_page $PAGE)   {

$PAGE->requires->css('/lib/yui/3.2.0/build/tabview/assets/skins/sam/tabview.css');
$PAGE->requires->js('/lib/yui/3.2.0/build/tabview/tabview-min.js');
$module = array(
'name'      => 'tabview',
'fullpath'  => '/lib/yui/3.2.0/build/yui/yui-min.js',
'requires'  => array('base', 'io', 'node', 'json', 'tabView')
);
$PAGE->requires->js_module($module);
$PAGE->requires->js_init_call('M.mod_my.init_tabview');

}

Hi Anita,

Whilst I see that what you've got works, there is an easier way around it that you may be interested in, or in fact there are two ways. I'll explain both here for yourself and anyone else who ends up here and I'll leave it up to you as to whether you decide to try either of them out.

First up, when working within a plugin (module/block/local) the js_init_call method if not given a module will automatically work out the path to your plugin and try to include a module.js file if it exists.
This means if you don't want to do anything flash, and you are happy with just using module.js and then doing the work in JS you can do the following:

PHP code:

$PAGE->requires->js_init_call('M.mod_my.init_tabview');


JS code: /mod/my/module.js

M.mod_my = M.mod_my || {};
M.mod_my.init_tabview = function(Y) {
Y.use("tabview", function(Y) {
var tabview = new Y.TabView({srcNode:'#demo'});
tabview.render();
});
};


HTML: Same as you had above.

What you can see from that is that in fact you only need one line of PHP and the function you already have within module.js.
Essentially by calling Y.use('tabview', function(){...}) you are requiring the one library you require.

Now lets say you wanted to include more libraries earlier on so that they loaded before you JS executed, or you wanted to name your JS file something other than module.js.
This is the second method that builds upon the first and does so by defining a JS module ($module) and passing that to the init call. Check out the following code example:

PHP code:

$module = array(
'name' => 'my_mod_alternative',
'fullpath' => '/mod/my/alternative.js',
'requires' => array('tabview')
);
$PAGE->requires->js_init_call('M.mod_my.init_tabview', null, true, $module);


JS code: /mod/my/alternative.js

M.mod_my = M.mod_my || {};
M.mod_my.init_tabview = function(Y) {
var tabview = new Y.TabView({srcNode:'#demo'});
tabview.render();
};


So a couple of things to note here, the first the PHP code now defines $module.
$module should be an array that contains the following:

1. name This should be the name of your module... what ever you want it to be.
2. fullpath This is the path to your JS file from Moodle's root directory.
3. requires This is an optional array of YUI modules to include. In your example you only need to specify 'tabview' as that will include all of the modules it requires.

The second thing to notice is that within the JS code you no longer need the Y.use('tabview', function(){...}). This is because your $module asked for it to be loaded with all the other JS for the page.

Anyway, hope this all helps in some way.

Cheers
Sam