jQuery & jQuery UI in Moodle 3.4

jQuery & jQuery UI in Moodle 3.4

by Conn Warwicker -
Number of replies: 9
Picture of Core developers Picture of Plugin developers

I've been using jQuery & jQuery UI in my plugins up to Moodle 3.3, which has worked fine, but i'm testing in 3.4 now and it's not working.

I've been putting this at the top of any pages that need it: 

        $PAGE->requires->jquery();

        $PAGE->requires->jquery_plugin('ui');

Which loads the 2 scripts and everything is fine, prior to 3.4.


Now, even though the scripts are still getting loaded:

<script type="text/javascript" src="http://localhost/moodle/theme/jquery.php/core/jquery-3.2.1.js"></script>

<script type="text/javascript" src="http://localhost/moodle/theme/jquery.php/core/ui-1.12.1/jquery-ui.js"></script>


I am not able to use the UI datepicker function, and am getting a console error "datepicker is not a function".


I've tried in the clean moodle theme and it's the same issue.

I've also noticed that even if I remove the requires-> calls, a jquery-3.2.1.min.js file is still being included by Moodle, though not a jquery ui one.


I have a lot of scripts which rely on jquery and jquery ui and at the moment nothing is working.


Does anyone know what might be causing this issue?



Average of ratings: -
In reply to Conn Warwicker

Re: jQuery & jQuery UI in Moodle 3.4

by Howard Miller -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

It definitely still works. However, I would encourage you to migrate your code as AMD modules (it just needs a bit of wrapper code around your original code most of the time). See...

https://docs.moodle.org/dev/Javascript_Modules

I've not tried it your way, so I don't know if that is (still) supported.

Average of ratings: -
In reply to Howard Miller

Re: jQuery & jQuery UI in Moodle 3.4

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

My gapfill question type uses JQuery and JQuery UI, though I think I am using it in the "wrong" way. However when I first started using it around 2012 using JQuery at all was wrong.

You can see the code here

https://github.com/marcusgreen/moodle-qtype_gapfill


This like might be important

https://github.com/marcusgreen/moodle-qtype_gapfill/blob/8f7fa7c2860e4b5a8555f2962cdb3dfd3eade25f/questiontype.php#L56

Average of ratings: -
In reply to Marcus Green

Re: jQuery & jQuery UI in Moodle 3.4

by Conn Warwicker -
Picture of Core developers Picture of Plugin developers

I'm doing it the same way, with the calls to require juqyer and jquery ui, but for some reason in 3.4, even though the jquery ui script is included in the source, it's not working. I'm wonderinf if it's being overriden by something somewhere else.

Average of ratings: -
In reply to Conn Warwicker

Re: jQuery & jQuery UI in Moodle 3.4

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

I did go through some grief when I first used it with 3.4, but unfortunately I cannot remember the details.  I remember putting in some additional js calls to make it work and then at some point realising they were not necessary. My apologies that is so incredibly vague and unhelpful.

Average of ratings: -
In reply to Marcus Green

Re: jQuery & jQuery UI in Moodle 3.4

by Conn Warwicker -
Picture of Core developers Picture of Plugin developers

Don't supposed you ever remembered how you resolved this, did you?

It's going to be hell trying to wrap all of my large scripts into AMD modules, with all the function calls having to be changed.

Average of ratings: -
In reply to Howard Miller

Re: jQuery & jQuery UI in Moodle 3.4

by Conn Warwicker -
Picture of Core developers Picture of Plugin developers

I make use of several external jquery plugins, like gridviewscroll, slimmenu and some others. How does AMD work with including those? Do I have to wrap them in an AMD module as well?

Average of ratings: -
In reply to Conn Warwicker

Re: jQuery & jQuery UI in Moodle 3.4

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

If the JQuery plugins are AMD compatible, you should just be able to include them as dependencies normally. 

See this post regarding loading JQuery UI (which arejquery plugins)

https://moodle.org/mod/forum/discuss.php?d=327189


If they are not, then life is a bit harder. I use $.getScript from within the AMD module itself to load the plugin. You probably also need some plumbing to make sure we only load the library once.  Here is an example from the Fancybox generico template...

 $.getScript('https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js', function(){
     //do something with the newly loaded plugin
  });
Average of ratings: -
In reply to Conn Warwicker

Re: jQuery & jQuery UI in Moodle 3.4

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Conn

I think that something else is loading JQuery into the global space, after you have loaded JQuery and JQueryUI. I think its unlikely that it is Moodle , more likely a theme or plugin. But it could be I suppose. 

What happens in this case, is that JQuery UI was attached as a set of plugins to the JQuery in the global space. And then something else loads JQuery, which overwrites the previous one, and so those JQuery UI plugins are gone. 

AMD was designed to prevent this very sort of thing, and though its quite daunting at first, it makes sense to spend the time to get it to work with your plugin. Then this never happens. 

However if its just a script for your own use, then you might be able to just find the offending plugin or theme. 


Average of ratings: Useful (1)
In reply to Conn Warwicker

Re: jQuery & jQuery UI in Moodle 3.4

by Amy Stewart -

I was able to get datepicker to work by commenting out a line in <dirroot>/lib/requirejs/moodle-config.js.  It is line 20 and it's a fix for MathJax.  The new file looks like the following:

var require = {

    baseUrl : '[BASEURL]',

    // We only support AMD modules with an explicit define() statement.

    enforceDefine: true,

    skipDataMain: true,

    waitSeconds : 0,


    paths: {

        jquery: '[JSURL]lib/jquery/jquery-3.2.1.min[JSEXT]',

        jqueryui: '[JSURL]lib/jquery/ui-1.12.1/jquery-ui.min[JSEXT]',

        jqueryprivate: '[JSURL]lib/requirejs/jquery-private[JSEXT]'

    },


    // Custom jquery config map.

    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' }

    }

};


Average of ratings: Useful (1)