jQuery: Difference between revisions

Revision as of 00:29, 19 April 2016

Moodle 2.9

Before Moodle 2.9 we used YUI to write javascript in Moodle. As of Moodle 2.9 we are transitioning to jQuery and Javascript Modules because Yahoo has ceased all new development on YUI (http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui).

This page explains the recommended way to use jQuery in core and plugins, although other older methods of including jQuery will still work.

Why do we need JQuery?

JQuery is useful for handling browser inconsistencies, and for utility functions that would otherwise be duplicated all over the code. Some particular things that JQuery is good at are:

DOM Manipulations
Promises ($.Deferred)
Ajax

How to use JQuery

As of Moodle 2.9, the recommended way to write javascript is in AMD Modules. For more information on writing AMD modules in Moodle see Javascript Modules .

JQuery has been added as an AMD Module and is available to all AMD javascript.

To make use of JQuery, either list it as a dependency of your module, or use a require call to load it.

As a dependency of a module

   define(['jquery'], function($) {
       // Private functions.
       var privateFunc = function(a) {
           // JQuery is available via $ if I want it
           return a + 1;
       };
   
       // Public functions.
       return {
           publicFunc: function(b) {
               // JQuery is available via $ if I want it
               return privateFunc(b) + 1;
           }
       }
   });

With a require call

   require(['jquery'], function($) {
       // JQuery is available via $
   });
   // JQuery is not in scope and cannot be used.

What about JQuery UI ?

JQuery UI is a separate project containing a library of reusable widgets that relies on JQuery. JQuery UI is available for plugins to use, but it should not be used in core code.

The problems with JQuery UI are:

It uses an entirely different themeing system for CSS that does not work well with Moodle themes
It introduces CSS conflicts with bootstrap
The widgets have some accessibility features - but only if used in a very specific way which is not well documented

Over time we will build up a library of widgets in core either by wrapping a suitable library or implementing from scratch.

If you STILL want to use JQuery UI in your plugin, it is available as an AMD module named 'jqueryui'.

   require(['jquery', 'jqueryui'], function($, jqui) {
       // JQuery is available via $
       // JQuery UI is available via $.ui
   });
   // JQuery is not in scope and cannot be used.
   // JQuery UI is not in scope and cannot be used.

Documentation