AJAX/HIJAX Calendar Block

AJAX/HIJAX Calendar Block

by Mat Cannings -
Number of replies: 12
I have attached to this post a replacement calendar_month block that is the same as the standard distro but uses the YahooUI libraries to add AJAX functionality after it has loaded (HIJAX).

Works on 1.7 dev (and 1.6 if YUI library is installed in the lib folder)
I have assumed that the relevant libraries are loaded already through being added to the /lib/javascript.php file.

The functionality works as per the regular calendar_month block when Javascript is disabled and has AJAX functionality attached to the next and previous links when the Yahoo libraries are already loaded and Javascript is running. If javascript is enabled but the libraries are not loaded, then a Javascript error occurs but regular non_ajax functionality takes place.

Some code is 'recycled' wink from Nathanael Klassen's calendar block contained in this thread http://moodle.org/mod/forum/discuss.php?d=33778

If you are going to test this please make a back up of the original calendar_month folder first so that you can go back if it does not work. Also I apologise for the state of the source code, this was my first attempt using YUI library and I am sure many things can be improved, I have tried to include comments in the code as much as possible
Average of ratings: -
In reply to Mat Cannings

Re: AJAX/HIJAX Calendar Block

by Mat Cannings -
DO NOT INSTALL THE BLOCK IN THE PREVIOUS POST
A bit dramatic but the version attached to this one is so much better(even if I do say so myself big grin)

The previous block was a replacement for the existing Calendar Month Block but the new one can quite happily sit alongside.

Since the last post I have added a (very) basic test to see if the Yahoo library is available this should reduce the chance of generating a Javascript error.

This block will act strangely if you have an instance of the regular Calendar Month block on the same page but other than that there is nothing else that you need to know about.
Average of ratings: -
In reply to Mat Cannings

Re: AJAX/HIJAX Calendar Block

by David Scotson -

Hi,

I tried out your calendar and it's very cool, this should certainly replace the current calendar.

For anyone else trying it out, to get it working I needed to add:

/lib/yui/yahoo/yahoo.js
/lib/yui/event/event.js
/lib/yui/dom/dom.js
/lib/yui/connection/connection.js

to lib/javascript.php (I assume this will be done automatically once Moodle uses more of YUI?)

One suggestions would be to leave the current calendar in place right up until it gets replaced. Otherwise, for me at least, it makes the calendar 'wobble' as the column shrinks and then grows again as the content changes. (Maybe just change the clicked link to a 'throbber' to show something is happening.)

Average of ratings: -
In reply to David Scotson

Re: AJAX/HIJAX Calendar Block

by Jan Dierckx -

Thanks for sharing this. I was looking into YUI and it is nice to see some examples of it being used in Moodle.

I also hope it will be used more in Moodle, but it is still a heavy download for site users to have YUI included on every page.

  • Wouldn't it be better to include the minimized versions (connection-min.js, event-min.js) of the library in the Moodle distribution? Developers could still download the full versions from the Yahoo site (that's what I did, because I needed the examples in there as well...) for debugging purposes.

  • Could it be possible to rewrite the overlib functions to make use of YUI? Overlib is included on every Moodle page and is AFAIK only used in the calendar.

  • If you want a block to add javascript to the page header, you can add a file javascript.php inside the directory of the block. It will automatically be loaded. Unfortunately I can't add PHP inside that file (with a check for inclusion of the YUI files) Does anyone have a solution for this?

Average of ratings: -
In reply to Jan Dierckx

Re: AJAX/HIJAX Calendar Block

by David Scotson -

Regarding overlib.js and the Calendar pop-ups, I personally would be happy to see it removed completely and replaced with a simple text title attribute to be displayed by the browser.

YUI does include a simple 'tooltip' class that could be extended, as well as the more general 'overlay' class that can be used for all sorts of pop-ups but I'm just not sure how usable/accessible it is to have little tooltips popping up that contain links. And at the moment it's yet another strange wrinkle to deal with when themeing.

Maybe YUI could be used to hide and show a list of all events for the month and filter by date/type but on the other hand maybe just a clickable link that takes you to a simple clear HTML page with the events for that day would be simpler and more usable as well as more accessible?

However I must admit I'm not a big user of the calendar and maybe people would be outraged at having this vital feature removed. In that case a YUI rewrite would certainly be the best way forward.

Average of ratings: -
In reply to David Scotson

Re: AJAX/HIJAX Calendar Block

by Simon Bryan -
Hi David,
For a php/js dummy, can you expand on the statement about adding the js files to the php file? How is that done? I have the YUI files on my server in /lib/yui.
Average of ratings: -
In reply to Simon Bryan

Re: AJAX/HIJAX Calendar Block

by David Scotson -

There's a file called lib/javascript.php which controls the javascript includes in the head section of your Moodle pages.

You'll find lines like:

<script language="JavaScript" type="text/javascript" src="<?php echo $CFG->httpswwwroot ?>/lib/overlib.js"></script>

which you can copy and change to include the required files (listed in a post above) e.g.

<script language="JavaScript" type="text/javascript" src="<?php echo $CFG->httpswwwroot ?>/lib/yui/yahoo/yahoo.js"></script>

(ignore the extra X added by Moodle for security reasons)

As Jan mentions there are 'compressed' or 'minified' versions of each file called whatever-min.js which are used in production to reduce download times. If you want to play about with the javascript then I'd stick with the standard versions for the time being.

I'm not sure how YUI is going to be plumbed into Moodle. Ideally you only want the parts that are used loaded, but you don't really want to go the route taken with CSS where different files are munged together as that would affect caching. Ideally you want a way to request that standard javascript library file x be linked from the header (but not add it twice if it is already requested) but also add random javascript, e.g. what is currently stashed in a script tag within the AJAX calendar block, too rather than have it inline. From what Jan says about javascript.php files within blocks the latter is possible but not the former.

Within that framework it might be cool if turning on Moodle's debug mode swapped out the minimised javascript for the more verbose ones (I think some have actual 'debug' versions too)

Average of ratings: -
In reply to David Scotson

Re: AJAX/HIJAX Calendar Block

by Simon Bryan -
OK, set that up, debugged and got the typos sorted out. From the posts above I expect to see a difference on the next and previous buttons, but I see no difference between the standard and the AJAX one on the screen. I do see the message that it is fetching the data for the next month, and it seems much quicker to scroll through the months.
The reason I am looking is because my school is examining the best way to put the school calendar on-line. So looking at any enhancements to the calendar.
Average of ratings: -
In reply to Simon Bryan

Re: AJAX/HIJAX Calendar Block

by David Scotson -

The only visible difference for me (since I edited out the 'loading' messages) is that the links don't jump me to the top of the page (which could be fixed in the HTML version too by adding the appropriate #anchor to the link) and a snappier response time because only the data that changes is being fetched from the server and redrawn on screen.

The general approach with YUI in Moodle will (hopefully) be to make things generally snappier and more responsive, while reducing server load and not impairing accessibility. This calendar mod is a small but important first step in that direction though it probably only rates a 'neat' rather than a 'wow-wee' on the cool-o-meter (and even then you'd have to be a geek like me to be impressed).

Having said that, it would be rather slick if the current month slid to the left and the next month slid in from the right to replace it (and similarly from the left for the previous month). Any YUI experts know if that's possible? It would probably help the user understand what's happening too.

Average of ratings: -
In reply to David Scotson

Re: AJAX/HIJAX Calendar Block

by Simon Bryan -
Thanks, yes the speed is quite noticeably faster - I am a lapsed geek, trying to take up the faith again!   smile

Just wanted to confirm that it was indeed working.
Average of ratings: -
In reply to David Scotson

Re: AJAX/HIJAX Calendar Block

by Jan Dierckx -

David,

The code in lib/javascript-mod.php will search the filters, blocks and modules for javascript.php files and automatically includes them in the header if any are found. So it could be of use for more than just the inline javascript. It also prevents javascript being added twice.

Adding all this inside the directory of a new module, block or filter has the advantage that users don't need to add javascript instructions to their theme files. All the code would be inside the install package for the module, block or filter

When it was added to Moodle 1.5 Martin said that it would use the *.php extension so you could add checks / add strings needed inside the javascript which are dependent on the language settings of a site / etc.... it could be used as the kind of framework you suggest: only load javascript that is necessary and load it inside the header of the page. Load specific versions if debugging is set, etc...

Unfortunately I can't get the javascript.php files to work the way they were intended. PHP added to this file doesn't get parsed...

Average of ratings: -
In reply to Mat Cannings

Re: AJAX/HIJAX Calendar Block

by Mat Cannings -
I have come up with an alternative version of the AJAX calendar block which is attached to this post.

I have completely rewritten the code so that it preloads the next and previous months. When you request a new month it is shown instantly and then preloads again. i.e. if you are looking at march, february and april are preloaded, when you request february it is shown immediately from storage, march is stored as the new next month and january is preloaded.

It works quite well although nothing happens if you request a month before it has preloaded(it will also throw an error if you request a month before the page has completely loaded). I may fix these problems but...

I have noticed that the filters are not being applied to the calendars. As a result I don't think I will be making any more changes/updates to this block as it has less functionality than the non-ajax equivalent which is a big problem. Unless I can manage to get the filters to work then this block shall be no more.

I will look at this at a later date but I have a couple of more practical/useful projects to look at so this will be taking a back seat for the time being. sad
Average of ratings: -
In reply to Mat Cannings

Re: AJAX/HIJAX Calendar Block

by Mat Cannings -
After playing with the YUI library for a short while I have completely rewritten the standard Calendar Block to utilise this library.

I have attached a block that is called Calendar Month 2 that retains all functionality of the original Calendar Month block but adds AJAX functionality to the previous and next buttons. It does support calendar filters but returns to current month if the page is refreshed. Because the block has a different name to the standard Calendar it requires it's own stylesheets, a copy of the standard style is used.

##IMPORTANT!!!##
This block should not be used on a live server as it has not been comprehensively tested.
I have only released is as a proof of concept.
Should work on 1.9+ and 2.0, it does not work with 1.9beta and may not work with 1.9+ released before 10th June 2008

To view this in action visit http://www.matc-online.co.uk
Average of ratings: -