Useful core Javascript modules

Moodle 2.9

Configuration settings (core/config)

Example of using config module: require(['core/config’], function(mdlcfg) {

   console.log(mdlcfg.wwwroot); // outputs the wwwroot of moodle to console

});

Language strings (core/str)

Example of using language strings module (retrieved via ajax, if the string is not yet loaded) require([‘core/str’], function(str) {

   // start retrieving the localized string; store the promise that some time in the future the string will be there.
   var editaPresent = str.get_string('edita', 'core', stringargument);
   // as soon as the string is retrieved, i.e. the promise has been fulfilled,
   // edit the text of a UI element so that it then is the localized string
   // Note: $.when can be used with an arbitrary number of promised things
   $.when(editaPresent).done(function(localizedEditString) {
        $("someUIElementSelector").text = localizedEditString;
   });

});

The string will be retrieved via AJAX request on the first use and cached in browser local storage until purge caches or site upgrade

IT IS NOT RECOMMENDED to call: $PAGE->requires->string_for_js('edita', 'core'); // You do not need this!

Because:

• The list of strings used now needs to be maintained in 2 places
• The strings are always sent, and bloat the page size even if they are not used
• All strings fetched via the AJAX method above are cached in browser local storage anyway, so these strings will never be used 99% of the time

Notifications (core/notification)

Examples: require(['core/notification’], function(notification) {

   notification.alert('Hello', 'Welcome to my site!', 'Continue');

});

Strings and notifications: require(['core/str', 'core/notification’], function(str, notification) {

               str.get_strings([
                       {'key' : 'delete'},
                       {'key' : 'confirmdeletetag', component : 'tag'},
                       {'key' : 'yes'},
                       {'key' : 'no'},
                   ]).done(function(s) {
                       notification.confirm(s[0], s[1], s[2], s[3], function() {
                           window.location.href = href;
                       });
                   }
               ).fail(notification.exception);

});

URL module (core/url)

Useful Functions: // Generate an absolute URL by using the relative path to a file and optionally slash arguments url.fileUrl(relativeScript, slashArgs) // Generate an absolute URL from the given relative path, include the URL parameters and possibly the current session key url.relativeUrl(relativePath, params, includeSessionKey) // Generates an image url using the filename of the image and the Moodle component (core, plugin, etc.) where it can be found url.imageUrl(imagename, component)

Example:

// Prerequisites: // - A Javascript file is present under $CFG->wwwroot."/path/to/file.js" require(['core/url'], function(url) {

   url.fileUrl("/path/to/file.js", "");
   console.log("Generated URL: " + url);

});

Ajax Module (core/ajax)

The preferred way to write new ajax interactions in Moodle is to use the javascript module "core/ajax" which can directly call existing web service functions. This saves having to worry about security in ajax functionality because it's all done for you.

For the full story, see AJAX

Tree (core/tree)

Moodle 3.1

If you want to add a hierarchical interface, you should use the tree module. It will handle user interaction and accessibility for you.

define(['jquery', 'core/tree'], function($, Tree) {

   return {
       init: function() {
           new Tree("css/jquery selector of the tree container");
       }
   };

});

Read more about the Tree module

Modal (core/modal)

Moodle 3.2

If you'd like to add a modal to your page the modal modules will handle all of the magic for you, all you need to bring is your content! require(['jquery', 'core/modal_factory'], function($, ModalFactory) {

 var trigger = $('#create-modal');
 ModalFactory.create({
   title: 'test title',

body: '

test body content

',

   footer: 'test footer content',
 }, trigger)
 .done(function(modal) {
   // Do what you want with your new modal.
 });

});

Read more about the AMD_Modal module

See also

• Javascript Modules
• Fragment