Adding jquery event listeners to course format via AMD API

Adding jquery event listeners to course format via AMD API

av Neil Haskins -
Antal svar: 4

I'm trying to create a new course format, which will make use of bootstrap tabs. I want to include a small piece of jquery to change their functionality, but I'm not sure how to make it work. I've been trying to use the AMD method as described here: https://docs.moodle.org/dev/Javascript_Modules

In course/format/timeline/format.js I have added $page->requires->js_call_amd('format_timeline/timeline', 'init');

If I comment out that line, things work normally (but not with my changes). When I uncomment that line, the tabs no longer work at all.

timeline/amd/src/timeline.js contains:

    /**
     * @module format_timeline/timeline
     */
    define(['jquery'], function($) {
        return {
            init: function() {
                function closeTabs() {
                    if ($(this).parent().hasClass('active')) {
                        $($(this).attr("href")).toggleClass('active');
                    }
                }

                $('.timeline [data-toggle=tab]').click(closeTabs);
                $('.timeline [data-toggle=pill]').click(closeTabs);
            }
        };
    });

And grunt has processed that, with no errors, to timeline/amd/build/timeline.min.js

It doesn't appear that my code is being loaded at all. What am I doing wrong?

Medeltalet av utvärderingarna: -
Som svar till Neil Haskins

Re: Adding jquery event listeners to course format via AMD API

av Tim Hunt -
Bild av Core developers Bild av Documentation writers Bild av Particularly helpful Moodlers Bild av Peer reviewers Bild av Plugin developers

Are there any errors showing up in your browser's developer tools? You should be able to see for sure there if the code is being loaded.

Medeltalet av utvärderingarna: -
Som svar till Tim Hunt

Re: Adding jquery event listeners to course format via AMD API

av Neil Haskins -
I wasn't getting anything in the console. I've turned on debugging, as suggested, and I realized I needed to capitalize $PAGE.

Now the default bootstrap javascript is working, but not my code, and I get an error in my console. It says:

  • Bootstrap AMD initialised
  • Bootstrap JavaScript initialised (unknown)
  • moodle-core-event: Global event published: FORM_ERROR                              yui_combo.php:5828:21
  • Error: No define call for format_timeline/timeline
    http://requirejs.org/docs/errors.html#nodefine

I checked the link, but I don't understand what I'm supposed to define, or how.


Edit: I'm on Moodle 3.0

Medeltalet av utvärderingarna: -