moodle-amd-javascript

Moodle AMD JavaScript

Overview

Moodle uses AMD (RequireJS) for browser JS. Source goes in <plugin>/amd/src/*.js (ES6+), built into minified AMD in amd/build/*.min.js via grunt. Never edit amd/build/ directly. Modules import Moodle core helpers via string IDs (core/ajax, core/str, core/templates).

When to Use

• Adding interactive JS to a plugin
• Calling a web service from the browser (core/ajax)
• Rendering a Mustache template client-side
• Showing a modal, notification, or toast
• Building a custom AMD module + grunt config
• Debugging "module not found" / "build out of date" warnings

Skip when: writing pure backend PHP — use moodle-plugin-development.

File layout

<plugin>/
  amd/
    src/
      foo.js              # ES6 source — edit this
      bar.js
    build/                # generated; commit but never hand-edit
      foo.min.js
      foo.min.js.map

Module ID at runtime = <component>/<filename> (no extension):

• local/example/amd/src/marker.js → local_example/marker
• mod/quiz/amd/src/preflight.js → mod_quiz/preflight

Module skeleton

// amd/src/marker.js
import Ajax from 'core/ajax';
import Notification from 'core/notification';
import {get_string as getString} from 'core/str';
import Templates from 'core/templates';

const SELECTORS = {
    BUTTON: '[data-action="mark-present"]',
    ROW: '[data-region="attendance-row"]',
};

/**
 * Initialise: bind click handlers.
 *
 * @param {number} sessionid
 */
export const init = (sessionid) => {
    document.addEventListener('click', async (e) => {
        const btn = e.target.closest(SELECTORS.BUTTON);
        if (!btn) {
            return;
        }
        e.preventDefault();
        const userid = parseInt(btn.dataset.userid, 10);
        try {
            const result = await markPresent(sessionid, userid);
            const html = await Templates.render('local_example/row', result);
            const row = btn.closest(SELECTORS.ROW);
            Templates.replaceNode(row, html, '');
        } catch (err) {
            Notification.exception(err);
        }
    });
};

const markPresent = (sessionid, userid) => {
    const request = Ajax.call([{
        methodname: 'local_example_mark_present',
        args: {sessionid, userid},
    }]);
    return request[0];
};