How to I add some javascript calls to the footer

How to I add some javascript calls to the footer

by Mike Worth -
Number of replies: 17
I am working on improvements to my day of the week in dates feature (MDL-17588) and in order to consistantly get the right days I'm looking to have some JS calls added to the footer (this way I can leave no days if the browser doesn't support JS and any that do will load the days as soon as the page is (almost) loaded.

I'm playing with lib/foprm/dateselector.php and datetimeselector.php so can't echo directly onto the page (it appears at the top as these lib files pass the html elsewhere and I don't want to go modifying lots of files).

Is there a function that can add to the footer <script language="JavaScript">WeekDays($randid);</script> where $randid is a php variable?

Thanks,
Mike
Average of ratings: -
In reply to Mike Worth

Re: How to I add some javascript calls to the footer

by sam marshall -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers
Hi,

If you were using the OU theme the answer would be yes, we have a dodgy global variable that does that. smile I don't know whether you can also do it in standard Moodle. HOWEVER:

Is this the best way to do it anyway?

Wouldn't it be better to do something like...

1) when you know you're going to need to draw the dateselector, call require_js('either-my-new-js-file-or-an-existing-js-file-which-will-include-mine.js'); - if the header hasn't yet been printed, this will wait for the header to do it

2) the js file you require will include an onload handler that automatically goes and finds everything with the correct class= for date/time selectors, and sets up the necessary handlers then. [YUI library does both installing onload handlers, and finding items with a given class, for you.]

--sam
Average of ratings: -
In reply to sam marshall

Re: How to I add some javascript calls to the footer

by Mike Worth -
I'm not 100% sure what the last bit is about, but it seems like I may have explained badly- I want to change the form element itself so that the days of the week appear everywhere that the standard date/datetime selectors are used.

I've got require_js working fine- the function I need is defined in the header. The only code I want inline is to actually call this function. I can't use window.onload as there is often more than one date/datetime selector on one page and it is vunerable to other things overwriting it as they themselves do things onload.

Maybe what you suggested solves this problem, if so could you explain in simpler terms please.

Thanks,
Mike
Average of ratings: -
In reply to Mike Worth

Re: How to I add some javascript calls to the footer

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Use YUI addEventHandler to add an onload (or ondomready) handler, which searches through the DOM (yui-dom?) to find all the date selectors.
Average of ratings: -
In reply to Tim Hunt

Re: How to I add some javascript calls to the footer

by Mike Worth -
Thanks for that, it seems that this is the way forward but I can't find it in the YUI docs; could you explain how to use it or link to somewhee that does please?

Thanks,
Mike
Average of ratings: -
In reply to Mike Worth

Re: How to I add some javascript calls to the footer

by Paul Holden -
Picture of Core developers Picture of Moodle HQ Picture of Moodle Workplace team Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
The YUI event utility has an onDOMReady method, which will do what you want smile
Average of ratings: -
In reply to Paul Holden

Re: How to I add some javascript calls to the footer

by Mike Worth -
I think I'm nearly there, but am now up against the original problem.

I've inserted:
require_js($CFG->wwwroot.'/lib/yui/yahoo/yahoo.js');
require_js($CFG->wwwroot.'/lib/form/weekdays.js');
echo '<script type="text/javascript">YAHOO.util.Event.onDOMReady(WeekDays)</script>';


I'm getting YAHOO is not defined, I assume because the echo prints right at the beginning of the document while the js isn't imported until the head. Would the best solution simply be to echo the <script> tag to load the yui library before setting the properties?

Thanks,
Mike
Average of ratings: -
In reply to Mike Worth

Re: How to I add some javascript calls to the footer

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
A better way to do that first require_js is

require_js('yui-yahoo');

There are a bunch of magic words that can be used. You can see the full list in lib/ajax/ajaxlib.php, I think.


You are right, you cannot do that echo until after print_header. Can't you just put that one line of JavaScript code at the end of your weekdays.js file?
Average of ratings: -
In reply to Tim Hunt

Re: How to I add some javascript calls to the footer

by Mike Worth -
You make a very good pointblush

That should sort out all my problems

Thanks a lot,
Mike
Average of ratings: -
In reply to Tim Hunt

Re: How to I add some javascript calls to the footer

by Mike Worth -
I've got it all working, but I cant get those yui magic words to work (it just says it can't find the files)

Thanks,
Mike
Average of ratings: -
In reply to Mike Worth

Re: How to I add some javascript calls to the footer

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Doh! sorry. It is 'yui_yahoo'. I aways have to look these up. Fortunately, in my editor, holding down CTRL and clicking on a function name jumps me to where it is defined. So I always have to type require_js, CTRL + click on it, then CTRL + click on 'ajax_get_lib' to get the definitive list. Alternatively, you can just remember that the place to look is cvs:/moodle/lib/ajax/ajaxlib.php.
Average of ratings: -
In reply to Tim Hunt

Re: How to I add some javascript calls to the footer

by Mike Worth -
Thanks, all working now.

MDL-17588 is what I've written (it adds days of the week to date and datetime selectors)

Mike
Average of ratings: -
In reply to Mike Worth

Re: How to I add some javascript calls to the footer

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Looks good, expect that you need to get the day names from the language pack.

What I would really like to see is JavaScript to turn the date selector into a pop-up calendar widget if you have JavaScript enabled.
Average of ratings: -
In reply to Tim Hunt

Re: How to I add some javascript calls to the footer

by Mike Worth -
Does JS have a localized language? (Could I get the days of the week with a javascript date function, or will I just have to set these variables on the php pages?)

As far as the calendar widget doo-dah, that does sound nice but I think I'll have to leave that for someone else to do.

Thanks,
Mike
Average of ratings: -
In reply to Mike Worth

Re: How to I add some javascript calls to the footer

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
You have to do get_string in PHP, and then pass that to JavaScript somehow.

I was going to make a nice mechanism for that at some point, but for now, you have to do it manually. Printing a script like

echo 'var days = ["' . get_string('mon') . '", "' . get_string('tue') . '"];';

from PHP is the sort of thing I mean.
Average of ratings: -
In reply to Tim Hunt

Re: How to I add some javascript calls to the footer

by Mike Worth -
I've just added a new version to the tracker that uses get_string (it gets them from the calendar lang file, is this ok?)

I thought that it would be easiest to look them up in the javascript file where they were defined in english before; to get this to work I renamed it to weekdays.js.php, is this ok?

Thanks for the advice,
Mike
Average of ratings: -
In reply to Tim Hunt

Re: How to I add some javascript calls to the footer

by Daniele Cordella -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
I had the same problem just yesterday
I used:

var url = '<?php echo "$CFG->wwwroot/course/view.php?id=$course->id" ?>';

and it worked.
So from php side it should be:

echo 'var url = \'<?php echo "$CFG->wwwroot/course/view.php?id=$course->id" ?>\';';
Average of ratings: -