Apply AJAX techniques during the edition of courses

Apply AJAX techniques during the edition of courses

by J.Lluís Milà -
Number of replies: 28

Hello,

I'm also a student of the UPF (pompeu fabra university, Barcelona) and in one of our subjets we have to try to improve some functionalities of Moodle.

My project is about the application of AJAX techniques during the edition of courses. For example, to be able to drag elements up and down for changing (or moving) its order without having to reload the entire web page two times. I will attach a file with screenshots showing the two times that the entire web page is reloaded.

By now, in the first step, I'm interested to know the opinions (for instance, if you think that is a good idea or not) of the moodle community about my project and if it can be already implemented (for avoid to reinvent the wheel).

I hope you will understand what I want to say.

Cheers !

Attachment Dibujo4.gif
Average of ratings: -
In reply to J.Lluís Milà

Re: Apply AJAX techniques during the edition of courses

by Michael Penney -
Yes its a great idea! Moving topics and copying activities would also be great additions. By the way, have you looked at the functions provided by the Chameleon theme?
Average of ratings: -
In reply to J.Lluís Milà

Re: Apply AJAX techniques during the edition of courses

by Urs Hunkler -
Picture of Core developers

J.Lluís, this is a great project and will be able to enhance the user experience a lot.

There are some first steps done in course layout editing - see my forum posting Moodle Ajax projects. The course editing solutions work but can not be integrated into the Moodle core because of incompatibilities with existing JavaScript functions. We need a solution that works with old code either by finding a solution to change the old code or find/develop code that does not interfere with exiting functions.

Your description is similar to the project AJAX Course Format described on the Student projects page in Moodle Docs. Please read there how you could start your project.

And please follow this discussion with Angel Díaz for more information.

Some links that may be of some help
_ Round-up of 30 AJAX Tutorials is an interesting collection of Ajax tutorials with topics like "AJAX Tabbed Pages Tutorials" or "Drag & Drop".
_ Survey of AJAX/JavaScript Libraries
_ Javascript libraries roundup

I wish you much success with your project
Urs

PS. My opinion is that using an existing well developed, tested and supported Ajax library is the far better way to go than to invent new scripts for Moodle.

Average of ratings: -
In reply to Urs Hunkler

Re: Apply AJAX techniques during the edition of courses

by Tony Hursh -
There's some really exciting work going on over at http://www.openlaszlo.org/

They're combining their existing (and nice) Flash-based UI with DHTML stuff from the Dojo toolkit.

You'll be able to deploy the same application as Flash, like this:

http://labs.openlaszlo.org/lzpix-flash/

or as DHTML, like this:

http://labs.openlaszlo.org/lzpix-dhtml/

(the DHTML version only works well in Firefox at the moment).

Very cool stuff indeed.

The Flash stuff has been around for a while, but the DHTML stuff is quite new.

Average of ratings: Useful (1)
In reply to Tony Hursh

Re: Apply AJAX techniques during the edition of courses

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Ah, bummer, not GPL-compatible.
Average of ratings: -
In reply to Martin Dougiamas

Re: Apply AJAX techniques during the edition of courses

by Tony Hursh -
I noticed that they were using a different OSI-approved license, but didn't read the details. I wonder if they'd be willing to agree to a different license?

Dojo might be worth a look, anyway, since it's BSD-licensed.

Average of ratings: -
In reply to Tony Hursh

Re: Apply AJAX techniques during the edition of courses

by Edgar Sanchez -
u can take a look also to prototype ,has mit license,its compatible with gpl,but not copyleft,its very used in ajax frameworks like rico
Average of ratings: -
In reply to Edgar Sanchez

Re: Apply AJAX techniques during the edition of courses

by Tony Hursh -
Thanks for the links, Edgar! The prototype link got messed up somehow. This one should work:

http://prototype.conio.net/

Average of ratings: -
In reply to Tony Hursh

Re: Apply AJAX techniques during the edition of courses

by Urs Hunkler -
Picture of Core developers

On the chameleon site I use the AJAX library script.aculo.us for Accordion, the Gallery and the sideblock dragging. It is an "effect" extension to prototype and has great potentials for UserInterfaces.

The less nice side of prototype is that it redefines some JavaScript internals which produces a conflict with the HTMLeditor used in Moodle. Andy had the same issue while he worked on the AJAX part of Chameleon.

For Accordion the prototype library is loaded only on pages which do not use the HTMLeditor to avoid the conflict.

I suppose it will be a challenge to find a good library which works with existing JavaScript code in Moodle.

Urs

Average of ratings: -
In reply to Urs Hunkler

Re: Apply AJAX techniques during the edition of courses

by Nathanael Klassen -

I posted a one line fix to make the HTMLEditor compatible with the prototype library here:

http://moodle.org/mod/forum/discuss.php?d=33778&parent=186343

I haven't noticed any issues caused by making this change, and it allows the prototype library and HTMLEditor to be used on the same page.

Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: Apply AJAX techniques during the edition of courses

by Urs Hunkler -
Picture of Core developers

Nathanael, thank you your information.

I tried your patch:

  • it works in 1.5
  • it does not work in 1.6 Beta 4 (there are some changes now compared to 1.5)

Is there a chance that you can investigate? I would highly appreciate your effort.

Urs

Average of ratings: -
In reply to Urs Hunkler

Re: Apply AJAX techniques during the edition of courses

by Nathanael Klassen -

Hi Urs,

I'll look into it. The fix was working under 1.6dev prior to the first betas. I haven't been able to keep our moodle up-to-date since the SourceForge CVS went down last month. Although CVS appears to be back up, I don't seem to be getting updates. I'll try to get the latest version and then try to figure out what needs to be changed to get scriptaculous and the HTML editor working together in 1.6.

Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: Apply AJAX techniques during the edition of courses

by Julian Ridden -
Anon CVC access is still not updating. So unless you have developer acces you won't be seeing the changes.

A way around this (though lengthy) is downloading the latest moodle zip download from the Downloads page. This is up to date (within a 24 your cycle).
Average of ratings: -
In reply to Julian Ridden

Re: Apply AJAX techniques during the edition of courses

by Nathanael Klassen -

Yes, I just finished downloading the zip file and merging all the changes. You're right...a lengthy process. I've made too many of my own changes to simply overwrite all the files. CVS updates that automagically merged the updates with my changes were so nice. Hope anonymous CVS will work properly again soon.

Average of ratings: -
In reply to Urs Hunkler

Re: Apply AJAX techniques during the edition of courses

by Nathanael Klassen -

Hi Urs,

I updated to 1.6 Beta 4 and found that the fix did still work in IE, but not in Firefox (don't have any other browsers on this machine to test). The solution is still pretty simple. Just one more if propertyIsEnumerable block was needed.

I've attached the htmledit.php file for 1.6beta4 with the necessary fixes. Again, this isn't thoroughly tested, but I can now open a page that loads both prototype.js and the HTML Editor without any JavaScript errors in both IE and Firefox.

Let

Nathanael

Average of ratings: -
In reply to Urs Hunkler

Re: Apply AJAX techniques during the edition of courses

by Nathanael Klassen -

Hi Urs,

I updated to 1.6 Beta 4 and found that the fix did still work in IE, but not in Firefox (don't have any other browsers on this machine to test). The solution is still pretty simple. Just one more if propertyIsEnumerable block was needed.

I've attached the htmledit.php file for 1.6beta4 with the necessary fixes. Again, this isn't thoroughly tested, but I can now open a page that loads both prototype.js and the HTML Editor without any JavaScript errors in both IE and Firefox.

Let me know if you find any issues.

Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: Apply AJAX techniques during the edition of courses

by Urs Hunkler -
Picture of Core developers

Thanks for your fast answer Nathanael. I checked your changes with Moodle 1.6 Beta 4 and the HTMLeditor now loads perfectly in the Accordion course.

I also checked with Opera and saw, that this browser doesn't show the HTMLeditor at all wink

Urs

Average of ratings: -
In reply to Nathanael Klassen

Re: Apply AJAX techniques during the edition of courses

by Urs Hunkler -
Picture of Core developers

With Nathanael's help the prototype library does work now in Moodle 1.6 Beta 5 from today. I added Nathanael's patch to the HTMLeditor code. If no problems occure you can integrate prototype into your list of possible AJAX libraries to work with.

Thank you very much again for your fast response Nathanael.

Urs

Average of ratings: -
In reply to Urs Hunkler

Re: Apply AJAX techniques during the edition of courses

by Tony Hursh -
The Accordion stuff is really cool, Urs. I can't wait to see where this goes.
Average of ratings: -
In reply to Martin Dougiamas

Re: Apply AJAX techniques during the edition of courses

by Ger Tielemans -
What is exactly wrong with CPL?
Average of ratings: -
In reply to Ger Tielemans

Re: Apply AJAX techniques during the edition of courses

by Tony Hursh -
Martin may have a specific problem in mind, but I'd guess that one issue is "license proliferation". Having part of the code base under one license and part under another would be confusing, especially if you needed to reorganize things, say, by taking some stuff out of the CPL-licensed code and putting into a GPL file. Which license applies to the resulting code?

The FSF page about this says that the CPL is not GPL-compatible due to patent issues, among others.

The BSD license (current "modified" version, as opposed to "classic" BSD) doesn't have these problems, and is compatible with GPL, according to the page above.

Disclaimer: I'm not a lawyer and don't even play one on the net. smile

Average of ratings: -
In reply to Martin Dougiamas

Re: Apply AJAX techniques during the edition of courses

by Joan Codina Filba -
Yahoo has released under BSD a "very complete" library of ajax functionalities
http://developer.yahoo.com/yui/

I also used the one lib of  walter zorn.

http://www.walterzorn.com/index.htm  (gpl)
there where some incompatibilities withe the html editor but I could solve them for the floating block
http://moodle.org/mod/forum/discuss.php?d=33222

Average of ratings: -
In reply to Urs Hunkler

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: Apply AJAX techniques during the edition of courses

by Urs Hunkler -
Picture of Core developers

Marc, the sideblock dragging feature is a start and far from perfect. Many enhancements are possible.

@"... I think we should change a bit the moodle code."

I suppose you need to add some hooks for the scripts in the Moodle code like CSS needs hooks for styling. But please be very careful. Moodle is a complex and well working application. Your additions must not break any part of Moodle.

I hope this helps
Urs

Average of ratings: -
In reply to Urs Hunkler

Re: Apply AJAX techniques during the edition of courses

by J.Lluís Milà -
Hello again!
In the first steps on programming I tried to use the wz_dragdrop.js library to give drag&drop capabilities to the modules(or items). But I observed that in IE doesn't works properly (starting the drag on a image of a div). Then I took a look at the HTML code generated and prove to remove strange styles and .js libraries and I noticed that the problem is overlib.js library because when I remove the hook to this library, the page works fine.
I'm not a javascript expert (this is the main reason that I write this, maybe I'm confused), but I have tried to look for problems in the two libraries (wz_dragdrop.js and overlib.js),
and I have noticed that the problem could be the document.onmousemove event.
Overlib takes the handler of this event and adds her functions to the end of this function at runtime. And walterzorn saves a copy of this handler, overwrites it with the his DRAG function, and calls it at the end of his DRAG function  something like "return copy(e)". I don't know why but if that event handler doesn't return false (this cancels the event?, but why is this necessary?), the script doesn't work properly in IE. My solution is also to call the copied handler function, but not returning his value, only return false always, ensuring that false is always returned (and not change the overlib functions to return false):
" copy(e); return false; ". But I don't know if this could break some other functionality (the .js files has thousands of lines, everything is possible).

Any ideas ?
thanks.

PS: I attached a simple script example (in the .htm file), that doesn't work properly in IE because the onmousemove handler doesn't return false.
Average of ratings: -
In reply to J.Lluís Milà

Re: Apply AJAX techniques during the edition of courses

by J.Lluís Milà -
One other thing, I think that it have to be in moodle a predefined way to add the .js files in one file or, can I freely add .js files anywhere in the php files?
Ex: echo '<script  src="file.js"></script>';

Anybody knows ?¿
Average of ratings: -
In reply to J.Lluís Milà

Re: Apply AJAX techniques during the edition of courses

by Joan Codina Filba -
If you downolad the patch for a floating window that you can find in
parles.upf.es/TEST there you will find a version of overlib that does not conflict with drag&drop... but i don't remember which were the canges I did to them.

Joan Codina
Average of ratings: -
In reply to Joan Codina Filba

Re: Apply AJAX techniques during the edition of courses

by J.Lluís Milà -
I have download the languagetool.zip file and I didn't find any version of overlib.js on it. Only a earlier version of wz_dragdrop.js than our version. This version has the same conflict and doesn't support some functionalities that we use. And now the TEST server is down again ...
Average of ratings: -