Prototype Quick Reference

This is a quick reference guide to Prototype, the
javascript framework used in Ruby on Rails. I like to keep things
consistent, so when I’m using other languages I stick with Prototype,
and end up needing a quick reference guide. If it’s not on this list,
then it’s not something I’ve had a need to use so far.

obj = $(“elementID”);
Get the html element with the ID of “elementID”
objArray = $(“element1″,”element2″) Get an array containing multiple elements
document.getElementsByClassName(“theclass”) Get an array containing all elements with the class
Element.removeClassName(“elementID”,”theclass”); Remove the class from the element.
Element.addClassName(“elementID”,”theclass”); Add the class “theclass” to the element  
new Insertion.Before(“elementid”,”text here”); Inserts the text directly before the “elementid”
   text here<span
new Insertion.Top(“elementid”,”text here”); Inserts the text inside the element at the top:
   <span id=”elementid”>text here
new Insertion.Bottom(“elementid”,” text here”); Inserts the text inside the element at the bottom:
   <span id=”elementid”>Original text
new Insertion.After(“elementid”,”text here”); Inserts the text directly after the “elementid” element.
id=”elementid”>Original</span>text here
$(“element1″,”element2″).each( function (theobj){
Traverse through the array using the .each syntax
similar to ruby.
Element.hide(“elementid”); Hides the element“elementid”); Shows the element
Element.toggle(“elementid”); Toggles the show/hide status of an element
Element.remove(“elementid”); Remove an element from the page
$F(“fieldname”) Return the value of the form element, whether it is a
text input, textarea, select box or checkbox. If it is a checkbox, it
will return undefined if unchecked. Radio groups don’t work.
Form.getElements(“formID”) Returns an array of all the form elements for form
Form.serialize(“formID”) Returns a formatted URL containing all the elements in
the form, similar to &field=value&field2=othervalue
Form.focusFirstElement(‘formID”); Will set focus on the first form element.
other stuff
allow you to execute the second function if the first
one fails. Kinda like try/catch, except it doesn’t make any sense.
Ajax Now with enhanced cleaning action.
function ajaxMe( theUrl, data ){
   var ajaxRequest = new Ajax.Request(
     theUrl,{method: ‘post’, parameters:
data, onComplete: theResponse});

function theResponse(origRequest){

A very basic Ajax request. theUrl must contain the url
of the ajax page that you are trying to call, and data contains
whatever data you are trying to pass to the server-side page. In many
cases theUrl can be built by using Form.serialize, depending on the

Comments are closed.