Forum OpenACS Q&A: examples of widgets using Ajaxhelper?

Hello everybody,

I've been looking at Ajaxhelper and it looks great - well done to everybody involved there. I would love to see examples of it being used with template::form - ideally in a widget, as I hope to write my own widget.

Any pointers?

Many thanks,
Brian

Collapse
Posted by Dave Bauer on
What I would recommend is adding an HTML class for the type of widget you'd like to add ajax behavior, then you can add javascript behavior to the element based on the class, or HTML ID (automatically generated in newer openacs versions).

This is known as progressive enhancement. That is, make sure it works without javascript first, then add optional javascript behaviors.

Here is some background https://openacs.org/xowiki/ajax-accessibility

Not only does this make your site accessible, it is good form, seperation, and abstraction.

Collapse
Posted by Brian Fenton on
Hi Dave,

that's very sound advice - thanks for pointing that out. I'd like to take that approach. Do you know of any examples around of the use of Ajax with template::form?

thanks
Brian

Collapse
Posted by Brian Fenton on
Just coming back to answer my own question. I was trying to build a pulldown which when you select an option, creates a multi-select using Ajax. I wanted 2 of these "widgets" on a page and they had to be able to work in edit mode and display the previously saved values.

In the end I didn't create a widget - I just used a template::form select widget which called a JavaScript function in the -html option (onClick). If you're new to Ajax like me, the hardest part was figuring out the Prototype calls, I eventually got that working from this documentation http://prototypejs.org/doc/latest/ajax/Ajax/Updater/

To get the edit mode working, I used the onLoad functionality to call the same JavaScript function to automatically open the multi-select.

Overall I was very happy with my Ajaxhelper experience and once you get used to it, combining it with Form Builder isn't too bad at all.