General developer forum

Hi Vijay

I recently  got some YUI code working in a plugin I am making. I found these docs helpful: http://docs.moodle.org/en/Javascript_and_YUI_3_FAQ

Very roughly what I did was:

1. In my module locallib file I defined a specifications array like this:

function myplugin_get_js_module() {
global $PAGE;
return array(
'name' => 'myplugin_template',
'fullpath' => '/mod/myplugin/module.js',
'requires' => array('base', 'dom', 'event-delegate', 'event-key', 'io','node', 'json')
);
}

I *think* this is used to tell the Moodle YUI loader what file to load and what YUI libraries must be included.

2. In my actual page:

$PAGE->requires->js_init_call('M.myplugin.init', null, false, myplugin_get_js_module());

This seems to make sure that the function in 1. is called - the includes are made and when the page loads the init routine is called. That is defined, along with my other JS code in a file called module.js here: mod/myplugin/module.js

3. Module.js

//attach my plugin code to the M object

M.myplugin = M.myplugin || {};

//Y is passed by Moodle

M.myplugin.init = function(Y) {

//i export Y and attach it to my object so I can use it in my functions

M.myplugin.Y = Y;

//OK. this is my case . yours may be different

//Other stuff to do in the init

//I am attaching an event handle to the change event of a select box with id 'select' which will call my function doSomething() when changed

Y.on('change',M.myplugin.doSomething,'#selectid');

}

//define the function which is called when the change event is called

M.myplugin.doSomething = function(event) {

alert('the select box has been changed');

}