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.
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){ |
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. |
December 18th, 2008 at 1:28 am
I think it is great! Thanks for your information.
December 29th, 2008 at 1:23 am
Great!
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
June 16th, 2009 at 5:35 am
i donnot understand it: i bet china cnc router doesnot either
September 16th, 2009 at 8:18 pm
smallmoqjewelry inc with all jewelry wholesale worldwide.
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!