I used to hate Javascript, but thanks to Sam Stephenson for the Prototype Javascript library, coding Javascript is no longer the same with what it used to be.
One of key features provided by Prototype library is the extension of HTML Elements, Form and Form Elements. Form refers to the form object, while Form Elements refer to the input fields, text area and selection boxes. The extension includes really useful helper methods, such as:
- for Elements, e.g.
addClassName(), descendentOf(), toggle()
- for Form, e.g.
disable(), serialize(), and reset(),
- for Form Elements, e.g.
activate(), clear(), getValue()
Please refer to Prototype API reference documentation for the description of each function, and there are a lot more helper methods available.
To access the helper methods, you need to retrieve the element using Prototype utility method $('[element-name]'):
$('[element-name]').toggle();
$('[form-name]').reset();
$('[form-element-name]').getValue();
While most of the helper methods extension provided by Prototype should satisfy your needs, but at times when you may want to extend those methods. So how do you go about doing that?
A simple example, the Element extension provides the toggle() method that hides and shows an element, but if at times, you may want to toggle an element and at the same time toggle another element. For example, clicking on ‘Add new category’ will hide the link and show the add category form, and vice versa, clicking on ‘Cancel’ will hide the form and show ‘Add new category’ link.
So you thought of introducing toggleWith() method, instead of calling two statements seperately:
$('[link-id]').toggle();
$('[form-id]').toggle();
And this is how you can extend the Element methods:
// Extend Element.Methods with new functions
// For form and form elements, use Form.Methods and
// Form.Element.Methods
Object.extend(Element.Methods, {
// the first argument refers to the called element
toggleWith: function(element, otherElement) {
element.toggle();
$(otherElement).toggle();
}
[, ... other functions if there's any ]
);
// Call this to reflect the new functions
Element.addMethods();
// Now you can call the new function
$('[link-id]').toggleWith('[form-id]');
If you use Scriptaculous library and you may want to extend your toggle method with the blind down effect:
Object.extend(Element.Methods, {
toggleWith: function(element, otherElement) {
element.toggle();
new Effect.BlindDown(otherElement, {duration: 0.2});
}
);
If you are learning Prototype, I would suggest that you use Firefox and install DevBoi and DevBoi: Prototype JS Reference; with those in place, you can easily call up Prototype API reference on Firefox sidebar by simply pressing Ctrl-F9.
For form elements like a check box you may want to introduce the toggleAll() method to toggle all other checkboxes with the same class name, and toggleMaster() to uncheck the master checkbox if any of the children boxes is unchecked, they will come in handy.
As for other extensions, no problem for now, you already know how to do it.
