moodle/lib/requirejs/moodle-config.js causing issues

moodle/lib/requirejs/moodle-config.js causing issues

by Abdul Ghaffar -
Number of replies: 4
After upgrading from Moodle 3.3.2 to 3.7.2, lib/requirejs/jquery-private.js is not being loaded in browser and some errors are being reported in console for my custom js. 
After investigation , it came out that 'moodle/lib/requirejs/moodle-config.js ' has been changed.

From 

map: {

      // '*' means all modules will get 'jqueryprivate'

      // for their 'jquery' dependency.

      '*': { jquery: 'jqueryprivate' },


      // 'jquery-private' wants the real jQuery module

      // though. If this line was not here, there would

      // be an unresolvable cyclic dependency.

      jqueryprivate: { jquery: 'jquery' }

    }



To 


map: {

      // '*' means all modules will get 'jqueryprivate'

      // for their 'jquery' dependency.

      '*': { jquery: 'jqueryprivate' },

      // Stub module for 'process'. This is a workaround for a bug in MathJax (see MDL-60458).

      '*': { process: 'core/first' },


      // 'jquery-private' wants the real jQuery module

      // though. If this line was not here, there would

      // be an unresolvable cyclic dependency.

      jqueryprivate: { jquery: 'jquery' }

    }


As per my limited knowledge, if we place two element on same index of array (I mean * index of array map), value in 1st one will be overwritten, shouldn't it be like 

'*': { process: 'core/first', jquery: 'jqueryprivate' },

When I use above line instead of Moodle's, my issues are resolved. Can anyone explain reason my Moodle used in that way. Is it right or wrong. 

Thanks

Average of ratings: -
In reply to Abdul Ghaffar

Re: moodle/lib/requirejs/moodle-config.js causing issues

by Howard Miller -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
What was the *original* problem/symptom?
Average of ratings: -
In reply to Abdul Ghaffar

Re: moodle/lib/requirejs/moodle-config.js causing issues

by Justin Hunt -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Abdul. 

What you have written does seem to me to be correct. I looked up the Mathjax bug and fix and this was a bit of a hack to get MathJax to load. And another user has reported it caused problems for them. 

I suggest that you open a new Moodle Tracker issue and reference this forum post and the MathJax issue. As howard suggested also explain in a little detail the actual error that this caused for you.
Average of ratings: Useful (1)
In reply to Justin Hunt

Re: moodle/lib/requirejs/moodle-config.js causing issues

by Abdul Ghaffar -
@Howard and @Justin, thanks for response.

Error I am getting in console is 'audioplayer.js:3 Uncaught TypeError: $(...).jPlayer is not a function'




and details of above error 



Issue's detail is as follow.

I has wrapper of 'mod_page' module in mod. And a custom theme derived from 'base' theme. In config of my custom theme, a lot of '.js' are being added by following like this

GLOBAL $PAGE;
$PAGE->requires->js('/theme/collegev6/javascript/modernizr.custom.js',true);
$PAGE->requires->js('/theme/collegev6/javascript/custom_nav.js',true);
$PAGE->requires->js('/theme/collegev6/javascript/classie.js',true);
$PAGE->requires->js('/theme/collegev6/javascript/borderMenu.js',false);
$PAGE->requires->js('/theme/collegev6/javascript/kcheck_svgcheckbx.js',false);
$PAGE->requires->js('/theme/collegev6/javascript/testmil_svgcheckbx.js',false);
$PAGE->requires->js('/theme/collegev6/javascript/quizmil_svgcheckbx.js',false);
$PAGE->requires->js('/theme/collegev6/javascript/jquery.jplayer.min.js',true);
$PAGE->requires->js('/theme/collegev6/javascript/jplayer.playlist.js',false);
$PAGE->requires->js('/theme/collegev6/javascript/audioplayer.js',true);
$PAGE->requires->js('/theme/collegev6/javascript/validetta.js',true);
$PAGE->requires->js('/theme/collegev6/javascript/SetViewTimer.js',false);
$PAGE->requires->js('/theme/collegev6/javascript/Navigation.js',false);

In content of page, I am playing an audio by using 'jplayer' as follow


$(document).ready(function () {
jpPlayAudio("/theme/collegev6/audio/01/0102A-MJ101v6.mp3");

var audioPath = "/theme/collegev6/audio/01/";
var audioFiles = audioPath + "0102A-MJ101v6-1.mp3," + audioPath + "0102A-MJ101v6-2.mp3," + audioPath + "0102A-MJ101v6-3.mp3," + audioPath + "0102A-MJ101v6-4.mp3,"
+ audioPath + "0102A-MJ101v6-5.mp3," + audioPath + "0102A-MJ101v6-6.mp3," + audioPath + "0102A-MJ101v6-7.mp3," + audioPath + "0102A-MJ101v6-8.mp3";

preloadSound(audioFiles);
});

$(".question-wrapper").mouseenter(function () {
jpPlayAudio("/theme/collegev6/audio/01/" + $(this).data("audio"));
});



And methods in 'theme/collegev6/javascript/audioplayer.js' look like

//Function to play audio files using JPlayer
function jpPlayAudio(audioFile) {
if (audioFile.trim().length < 1)
{
$("#audioWrapper").empty();
} else
{

if ($('#jquery_jplayer_1').length > 0) {
$('#jquery_jplayer_1').jPlayer("setMedia", {m4a: audioFile}).jPlayer("play");
} else {
$("#audioWrapper").append("");
$("#audioWrapper").append("");


$('#jquery_jplayer_1').jPlayer({
ready: function (event) {
$(this).jPlayer('setMedia', {m4a: audioFile}).jPlayer('play');
}, swfPath: 'jplayer/',
supplied: 'm4a',
useStateClassSkin: true
});

$('#jquery_jplayer_1').bind($.jPlayer.event.play, function (event) {
$('.jp-controls .jp-play').removeClass('jp-pause-icon');
$('.jp-controls .jp-play').addClass('jp-play-icon');
});

$('#jquery_jplayer_1').bind($.jPlayer.event.pause, function (event) {
$('.jp-controls .jp-play').removeClass('jp-play-icon');
$('.jp-controls .jp-play').addClass('jp-pause-icon');
});
}
}

}


Average of ratings: -
In reply to Abdul Ghaffar

Re: moodle/lib/requirejs/moodle-config.js causing issues

by Justin Hunt -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
This type of error occurs because the jquery plugin jplayer has not been loaded. Either your jplayer load script ran before jquery was loaded. Or more likely, after you loaded jplayer plugin library, somewhere else jquery was loaded again into the global space. This would overwrite the jquery that you had loaded jplayer plugin in.

A quick fix might be to load jplayer in the footer (not in the header)

AMD modules were designed to get you out of just this sort of nastiness. Though its a bit of a learning curve, rewriting your JS as AMD modules will save you time and stress in the long run.
Average of ratings: -