Developing Moodle with JQuery - Moodle 3.3

Developing Moodle with JQuery - Moodle 3.3

by Dave Emsley -
Number of replies: 4

Can someone point me in the right direction please.  I'm trying to develop my theme along the lines that it should be according to documentation but I keep hitting a brick wall with the page https://docs.moodle.org/dev/Javascript_Modules#Minimum_.28getting_started.29_module_for_plugins

where the "minimum" module doesn't actually work.


I get the line....

require(["theme_curlew/startup"], function(amd) { amd.init(); });;
(theme name is curlew and js file is startup.js in the amd/src folder.

I've put the line:  

$CFG->cachejs = false;

in my theme config to stop js caching which (I think) means it runs the full js files rather than the minified ones.


Any advice or better still simple examples greatfully received.


Cheers

Dave






Average of ratings: -
In reply to Dave Emsley

Re: Developing Moodle with JQuery - Moodle 3.3

by Richard Jones -
Picture of Plugin developers Picture of Testers

Welcome to the club sad.  I appreciate Moodle developers are busy people but the doco is confusing and includes obsolete examples and missing links.

To compound this it is quite hard to find examples of code which reflect the new (newest of the new?) approach to Moodle/JS development.

I hope someone can help you, and by extension, me smile.

Average of ratings: Useful (2)
In reply to Richard Jones

Re: Developing Moodle with JQuery - Moodle 3.3

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

I hate to say it, but on "most" occasions I just wind up digging through the code for other plugins until I find an "example" of what I need to know how to do. Even sadder, is the number of times I've had to resort to, "let my try this" and "let me try that" until I get something to work the way I want it too. Just spent most of the past three days doing just that, to make it possible to change colors for each instance of a MooTyper activity in a course.

In reply to Dave Emsley

Re: Developing Moodle with JQuery - Moodle 3.3

by Richard Jones -
Picture of Plugin developers Picture of Testers

There is a simple (overly simple?) example here, built for another purpose but does include a minimal basic amd example too.

https://github.com/richardjonesnz/moodle_filter_simplemodal.



Average of ratings: Useful (1)
In reply to Richard Jones

Re: Developing Moodle with JQuery - Moodle 3.3

by Dave Emsley -

For the benefit of anyone else struggling with this I've had a look at the theme "adaptive".

Their theme has this in the js file  (NB My theme is called  Curlew):

/* jshint ignore:start */
define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/log'], function($, bootstrap, log) {

    "use strict"; // ... jshint ;_;.
    log.debug('Curlew StartUp function called');

    return {
        init: function() {
            $(document).ready(function($) {
                $(".fp-coursecat").click(function() {
                    $(this).css("border-color", "yellow");

                });       
            });
        }
    };
});
/* jshint ignore:end */

I've just chucked my jQuery into the same skeleton and it works IF I minify and add it to /amd/build/

Hope this is useful,

Dave