General developer forum

Javascript AMD issue using third party AMD Module (fontawesome iconpicker)

Picture of Manoj Solanki
Javascript AMD issue using third party AMD Module (fontawesome iconpicker)
Plugin developers


I'm working on a fix to integrate into a Moodle mod plugin so it works across all themes.  It currently works with Adaptable only.  The original issue is that with other themes, such as boost, it gives a jquery $ is not found error.  The way the code originally was developed, it simply calls the fontawesome iconpicker library through a straight javascript include.

Issue here for reference:

So I thought I would change this to call an AMD module, and make it compatible across all themes.

I have created an AMD module for including the fontawesome iconpicker js.  However I'm having issues.

I have an /amd/src folder containing the following (ps. switched off js caching):

/amd/src/iconpicker.js (An AMD compatible version of font-awesome iconpicker)

/amd/src/iconpickerincludes.js which contains:

define(['jquery', 'mod_bootstrapelements/iconpicker'], function($, iconpicker) {
    return {
        init: function () {
            $(function(){ $("#id_bootstrapicon").iconpicker({placement: "right", selectedCustomClass: "label label-success"}); });

This finds the fontawesome icon picker class just fine.

The moodle page now calls:  $PAGE->requires->js_call_amd('mod_bootstrapelements/iconpickerincludes', 'init');

However I get the following js error when clicking the box in Moodle frontend:

Uncaught TypeError: this.popover.pos is not a function

    at Iconpicker.updatePlacement (first.js:25956)

    at (first.js:26157)

    at HTMLInputElement.<anonymous> (first.js:25724)

    at HTMLInputElement.dispatch (jquery-3.2.1.min.js:3)

    at HTMLInputElement.q.handle (jquery-3.2.1.min.js:3)

It doesn't know about the bootstrap popover class at the time of the call.  So I modified the AMD module to include bootstrap js files that are needed.   So the define is as follows.

define(['jquery', 'mod_bootstrapelements/transition', 'mod_bootstrapelements/tooltip', 
                  'mod_bootstrapelements/popover', 'mod_bootstrapelements/iconpicker'], function($, transition, tooltip, popover, iconpicker) {

I'd gotten AMD compatible versions of the bootstrap files transition, tooltip and popover (the first two are prequisites needed by popover).  Still get the same error.  I could also have referred to the bootstrap_base/amd/bootstrap which also includes the missing js code it needs.  I tried that to no avail.

I've been testing this with Boost.  I've done simple AMD modules before but a little stumped here.  I might be missing something obvious here. Any ideas?!



Average of ratings: -
Picture of Justin Hunt
Re: Javascript AMD issue using third party AMD Module (fontawesome iconpicker)
Particularly helpful MoodlersPlugin developers

Maybe you should create a bootstrap prerequisites module, which loads all the bootstrap bits,  and then declare that as dependency on the iconpickerincludes module. Because I do not think AMD guarantees to load the modules in the order you specify. It just guarantees that dependent modules of the current module will be loaded first. Make sense?

Perhaps you could try with transition and tooltip in the bootstrap prerequisites module, and see how that works. 

Average of ratings: -