Prototype

• prototype.js

<script type="text/javascript" src="prototype.js"></script>

• If prototype.js is included twice, parts of it will crash in IE (document.getElementsByClassName(), ...)

Library functions

$()

• Get the DOM element with the specified id

$(id)   // document.getElementById(id)

$F()

$F(formFieldId)   // document.getElementById(formFieldId).value

$A()

• Converts an object to an indexed array

// Get all file inputs within obj without class custom
this.fileInputs = $A($(obj).select("input[type='file']"):not(.custom));

$H()

• Converts an object to an associative array (hash; key-value pairs)

$$()

• Returns every element that matches the specified CSS selector

$$('div.myClass')

select()

• Similar to $$() but can be applied to a specific element rather than the entire document

$(obj).select("select")                // Descendants of obj that are select elements

$(obj).select("select:not(.listbox)")  // Descendants of obj that are select elements without class listbox

each()

• The specified iterator function has two parameters:

function foo(obj) { ... }

$$(selector).each(foo);                     // Call foo() for each matching element
$$(selector).each(function(obj) { ... });   // Call an anonymous function for each matching element

update()

• Replace the innerHTML for the element

$(obj).update('hello');

setStyle()

$(obj).setStyle({ color:'#000' });

OOP

MyClass = Class.create({
    initialize: function() { ... },
    foo: function() { ... }
});
var myObj = new MyClass();   // Will pass any arguments to initialize()

Inheritance

var Parent = Class.create({
  initialize: function(a) {
    this.a = a;
  },
  foo: function(x) {
    return 'Parent ' + this.a + ' ' + x;
  }
});

var Child = Class.create(Parent, {
  initialize: function($super, a, b) {
    $super(a);
    this.b = b;
  },
  foo: function($super, x) {
    return 'Child ' + this.b + ' ' + x + ', ' + $super(x);
  }
});

var obj = new Child(1, 2);
alert( obj.foo(3) );         // Child 2 3, Parent 1 3

Object.extend()

Object.extend(destObj, srcObj); // Add the methods in srcObj to destObj

Ajax

• By default, POST is used for sending the CGI parameters

Request()

• Request the output for the specified URL

new Ajax.Request(url, {
    // Optional
    method:'get',          // Default: 'post'
    parameters: { ... },   // CGI parameters
    asynchronous: true,    // Default : true
    onSuccess: foo,
    onFailure: foo,

    onUninitialized: foo,
    onLoading: foo,
    onLoaded: foo,
    onInteractive: foo,
    onComplete: foo,
    onException: foo
});

function showResponse(xmlHttpRequest, responseHeader) {
    // Use one of the following:
    var text = xmlHttpRequest.responseText;
    var xml  = xmlHttpRequest.responseXML;
    var json = xmlHttpRequest.responseJSON;   // Have to evaluate it
    xmlHttpRequest.headerJSON;                // If server supports sending JSON in X-JSON header; otherwise, it's null
}

new Ajax.Request(url, {
    onComplete: showResponse
});

CGI parameters

parameters: { a:10, b:'orange', c: $F('c') }

parameters: $('formId').serialize(true),   // Send all form fields

Updater()

• Update the specified DOM element using the output from the specified URL

new Ajax.Updater('myId', url, {
    method: 'get',             // Default: 'post'
    parameters: { ... },       // CGI parameters
    insertion: Insertion.Top   // Instead of overwriting, add the content: Insertion.[Top, Bottom]
});

new Ajax.Updater({success: 'myId'}, url, {
    onFailure: foo
});

new Ajax.Updater({success: 'myId', failure: 'myId2'}, url, {});

PeriodicalUpdater()

• Update the specified DOM element at periodic intervals, using the output from the specified URL

new Ajax.PeriodicalUpdater('myId', url, {
    method: 'get',               // Default: 'post'
    insertion: Insertion.Top     // Instead of overwriting, add the content. Insertion.[Top, Bottom]
    frequency: 1,                // Seconds. Default: 2
    decay: 2                     // Factor to increase freq by, when the content hasn't changed. Default: 1
});

Sizzle

• sizzle.js

<script type="text/javascript" src="sizzle.js"></script>

Sizzle(expression [, element])

• Returns the DOM elements that match the specified CSS selector

var forms = Sizzle("form");

Misc

Running code when the page has loaded

document.observe("dom:loaded", function() {...})    // Similar to body onload, window.onload

Detecting browser version

if (Prototype.Browser.IE && (navigator.userAgent.indexOf('MSIE 6.0') > -1)) {..}   // IE6

Misc functions

• hasClassName("one")
• addClassName("one")
• removeClassName("one")
• toggleClassName("one")