General developer forum

 
 
Picture of Carl LeBlond
Adding javascript to page
 

I trying to add a script to a page (question type renderer.php) that will launch an applet (quiz renderer.php)  using YUI. In my yui init I tried doing a

s=creatElement('script');

...etc

but doesn't seem to work.

What would be the best way to add the following to a page via YUI?

<script LANGUAGE="JavaScript1.1" SRC="../../marvin/marvin.js"></script>

<script LANGUAGE="JavaScript1.1">

msketch_name = "MSketch";
msketch_begin("../../marvin", 520, 460);
msketch_end();
</script>

 
Average of ratings: -
Picture of Carl LeBlond
Re: Adding javascript to page
 

I can add the applet directly with s=creatElement('applet'); but I'd prefer to utilize the marvin.js utility loader.

 
Average of ratings: -
Picture of Andrew Nicols
Re: Adding javascript to page
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Hi Carl,

You don't say what version of Moodle you're running - there are different ways to do this depending on which version of Moodle you're using.

It looks like Marvin is a sketch applet?

There are a couple of ways of including it. One way to include it would be to use $PAGE->requires->js('/path/to/file'); to include the file, but you can't then guarantee that the file will actually be loaded before you use it.

An alternative way would be to write a YUI module. I've started rewriting the documentation on how to create YUI modules - see http://docs.moodle.org/dev/YUI/Modules for more information. You could then seed the YUI loader with your configuration:

YUI({
    modules: {
        'external-marvin': {
            fullpath: M.cfg.wwwroot + '/path/to/file'
        }
    }
}).use('external-marvin', function(Y) {
    msketch_name = "MSketch";
    msketch_begin("../../marvin", 520, 460);
    msketch_end();
});

Andrew

 
Average of ratings:Useful (1)
Picture of Geoffrey Rowland
Re: Adding javascript to page
Group Particularly helpful Moodlers

Hi Andrew

Can the YUI module approach be used for a Filter too?

e.g. moodle-filter_jmol-jsmol

I have been tinkering with updating the Jmol (3D chemical structure) applet Flter to use the new JSmol JavaScript/HTML version.

http://chemapps.stolaf.edu/jmol/jsmol/test2.htm

http://wiki.jmol.org/index.php/Jmol_JavaScript_Object

http://sourceforge.net/projects/jsmo

The JSmol JavaScript has some jQuery dependencies. So far, using Moodle 2.4.3 and simple<script></script> embedding to load JSmol.min.js, I have encountered 'clashes' between it and YUI.

So, wondering if a YUI module provides a sensible way forward.

Cheers

 
Average of ratings: -
Picture of Andrew Nicols
Re: Adding javascript to page
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Hi Geoffrey,

Technically, it can be used. From Moodle 2.5 though we'll have jQuery integration available for contrib plugins only. See the docs at http://docs.moodle.org/dev/jQuery. Please note, that any plugin depending on jQuery will not be accepted into core.

Andrew

 
Average of ratings: -
Gareth J Barnard
Re: Adding javascript to page
Group DevelopersGroup Particularly helpful Moodlers

Dear Geoffrey,

If you would like an example of using the Moodle 2.5 jQuery integration (MDL-15727), I did MDL-38650 for the MyMobile theme which uses jQuery and it's own jQuery based scripts.  The commit to see how it can be done is: https://github.com/gjb2048/moodle/commit/42d79f551d5f948c25754e3d3dca56dc05cf6912

Cheers,

Gareth

 
Average of ratings:Useful (1)
Picture of Geoffrey Rowland
Re: Adding javascript to page
Group Particularly helpful Moodlers

Hi Gareth and Andrew

A big thanks for the pointers to using YUI modules for getting JavaScript into Moodle. They have helped me make considerable progress in getting a Moodle JSmol filter working. Hope to release the code shortly..

One quick YUI newbie question, Is there any practical difference/benefit/preference in using 1. compared to 2. below?  Apart from 2. being slightly more verbose, they both appear to work well in my hands.

Cheers

Geoff

1.

YUI({ ...detail of module... }).use('module', function(Y) { ...JavaScript... });

2.

YUI.applyConfig({ ...detail of module... });
YUI().use('module', function(Y) { ...JavaScript... });
 
Average of ratings: -
Gareth J Barnard
Re: Adding javascript to page
Group DevelopersGroup Particularly helpful Moodlers

Dear Geoffrey,

To be honest, I'm a YUI newbie too and only recognised the need for the YUI solution I worked with Andrew on by the pattern of your problem.

From what I recall of testing the original MyMobile solution where we tried the equivilent of your '1' is that all of the other modules already loaded by Moodle were not in the scope of the theme, so when other bits used them then they would not work.  But with '2', this is a merge operation, so everything that has previously been loaded is also available to be used too within the scope.  This is my understanding, as I say I'm a newbie so might not be completely accurate.

Cheers,

Gareth

 
Average of ratings: -
Picture of Andrew Nicols
Re: Adding javascript to page
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Hi Geoffrey,

Bearing in mind that YUI() as a function returns an instance of a YUI object:

Basically, the first option will make your module available just in that instance. If you were to use YUI().use('yourmodule') again, then it would not know the details. The configuraiton is only applied for the duration of that YUI() instance.

With the second option, you're supplementing the global YUI configuration which has the effect of making your module available elsewhere should you so desire. Every time you get a new YUI instance using YUI(), it's configuration will include the configuration you supplied in the applyConfig function.

Andrew

 
Average of ratings: -
Picture of Geoffrey Rowland
Re: Adding javascript to page
Group Particularly helpful Moodlers

Thanks Andrew

So, for a filter replacing (filtering) several objects/items on a page,

YUI.applyConfig({ ...detail of module... }); should be called just once per page

but YUI().use('module', function(Y) { ...JavaScript... }); would be called for each replacement.

Is that right?

 
Average of ratings: -
Picture of Andrew Nicols
Re: Adding javascript to page
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Yes, that's right -- though ideally you would write your filter to only need to be called once - this isn't always possible of course.

 
Average of ratings:Useful (1)
Picture of Carl LeBlond
Re: Adding javascript to page
 

Sorry, I'm using 2.4.  Thanks for the example, I was thinking I needed to express it as a module, but was unsure on how to implement.  I'll give it a try.

 
Average of ratings: -
Gareth J Barnard
Re: Adding javascript to page
Group DevelopersGroup Particularly helpful Moodlers

Dear Carl,

Please see my post using Moodle 2.4 / 2.3 on https://moodle.org/mod/forum/discuss.php?d=226034#p982003

Cheers,

Gareth

 
Average of ratings: -
Picture of Carl LeBlond
Re: Adding javascript to page
 

OK I've been playing with this for a few evenings and not having much luck.

I placed the code in my question/type/marvin/module.js file outside.  The module.js is modified version of jme question type.  It fires up the applet but wipes the page of everything else and I never called the module/functions from render.php.  i think I have code in wrong place.  Here is code i started with.

YUI({
    modules: {
        'external-marvin': {

           //    fullpath: 'http://localhost/marvin/marvin.js';
            fullpath: M.cfg.wwwroot + '../marvin/marvin.js'
        }
    }
}).use('external-marvin', function(Y) {
//    fullpath: 'http://localhost/marvin/marvin.js';
//    alert(M.cfg.wwwroot);
    msketch_name = "MSketch";
    msketch_begin("../../marvin", 520, 460);
    msketch_end();
});

I'm working through the tutorial but I get the feeling its only applies to 2.5?

I tried adding the code to a file in yui directory structure as per tutorial but no go.  Where should this code reside?  Presumably I'd call it from renderer.php much like I do  my current javascript.

 

 
Average of ratings: -