Prototype Quick Reference

Wednesday, December 27, 2006

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.

Element
Functions		  
$()
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
“theclass”
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”
element.
   text here<span
id=”elementid”>Original</span>
new Insertion.Top(”elementid”,”text here”); Inserts the text inside the element at the top:
   <span id=”elementid”>text here
Original</span>
new Insertion.Bottom(”elementid”,” text here”); Inserts the text inside the element at the bottom:
   <span id=”elementid”>Original text
here</span>
new Insertion.After(”elementid”,”text here”); Inserts the text directly after the “elementid” element.
   <span
id=”elementid”>Original</span>text here
$(”element1″,”element2″).each( function (theobj){
      alert(theobj.innerHTML);
});		 Traverse through the array using the .each syntax
similar to ruby.
Element.hide(”elementid”); Hides the element
Element.show(”elementid”); Shows the element
Element.toggle(”elementid”); Toggles the show/hide status of an element
Element.remove(”elementid”); Remove an element from the page
   
Form
Functions		  
$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
“formID”
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.
   
Exception
Handling		  
Try.these(
       function(){  
            //
errors
       },
       function(){
            //
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){
    alert(origRequest.responseText);
}

 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
need.
   

Filed in Uncategorized | | Permalink

Leave a Reply