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

6 Responses to “Prototype Quick Reference”

  1. china CNC router Says:
    December 18th, 2008 at 1:28 am

    I think it is great! Thanks for your information.

  2. In dash DVD player Says:
    December 29th, 2008 at 1:23 am

    Great!

  3. wholesale jewelry Says:
    January 3rd, 2009 at 6:40 pm

    Asterbox.com announces the beta release of their Java mobile platform. They have openly declared what many users have felt: surfing the web on a mobile device is a disappointing experience. Their claims that the internet on the phone is dead, but can live on through web services have been embodied in the Asterbox mobile platform. The Java-based platform utilizes web APIs to deliver content and interactivity to end users in a new and innovative way. The software currently provides access to the Google Reader service, but more functionality is in the works.
    stainless steel earring http://www.fabeibei.com/stainlesssteelearring.htm
    stainless steel cufflinks http://www.fabeibei.com/stainlesssteelcufflinks.htm

  4. cnc prototype Says:
    June 16th, 2009 at 5:35 am

    i donnot understand it: i bet china cnc router doesnot either

  5. silver jewelry Says:
    September 16th, 2009 at 8:18 pm

    smallmoqjewelry inc with all jewelry wholesale worldwide.

  6. rpg games Says:
    November 13th, 2009 at 1:08 pm

    Great list, good information, really can help someone stay in the game. I love to play with prototypes, i agree, even when using other language we still think about them!

Leave a Reply