List All Pages
This is the unofficial Prototype & script.aculo.us wiki. It was started by T.J. Crowder in October 2008 as a result of discussions in the Prototype & script.aculo.us Google Group.
This wiki...
A question that comes up frequently on the discussion group is, in essence, "Why isn't my onSuccess handler returning a value?"
Consider this code:
function showRecord(target, recid)
{
var...
(Scroll down for edit link, page controls)
So, you've created your DOM element, hooked up your events, and…
What now?
Events that don't fire
A question that has often come up is, "Why doesn't my event fire?" or "My event fires once, and...
The best to to contact us about this wiki is to post a message in the Prototype & script.aculo.us Google group. Alternately, if you're a WikiDot user you can contact T.J. by following this...
Table of Contents
{$contents}
{$title}
{$contents}
Table of Contents
The Basics
Pride of Authorship
Respect
Style
Categories
Page Name and Title Conventions
Tags
Syntax Highlighting
The Basics
To edit a page, simply click the edit button at...
Official docs: Element.getDimensions
Although Prototype's getDimensions works great on elements that are, themselves, hidden, it doesn't work on elements inside hidden containers. Check out this...
Error: element has no properties
This error is most frequently caused by trying to access an element on the page that does not (yet) exist. Look at the following example:
<script...
Official docs: Event.stopObserving
The official docs don't currently mention have only just been updated to mention some changes to Event.stopObserving as of Prototype...
The great thing about both Prototype and script.aculo.us is that you can build on them — and wow have people built on them!
This page is for listing sites that have well-established libraries of...
TBD: Need to coordinate this with the Troubleshooting page, minimize redundancy
TBD: This is very Prototype-heavy, very little script.aculo.us content
Table of Contents
General
How Can I Learn...
Official docs: Function.bindAsEventListener
There's a misconception that any time you want to bind an event handler, you use bindAsEventListener. You don't. In fact, it's quite rare to need to use...
A "closure" is a function that has data intrinsically bound to it, for instance by virtue of where it's defined. This is a closure:
var a;
a = 5;
function myFunction()
{
//...
TBD Need an example of a really bulletproof Ajax.Request, since 99% of the examples people can find online "omit error handling for brevity".
This is a start in that it at least has onFailure and...
TOC
Discussion
Simple Example
Example Using a Closure
More Complex Example
Example Using an Object Instance Method
Discussion
You may be used to the "DOM0" style of hooking events:
<div...
Sometimes you find that you want to load a script file dynamically without refreshing the entire page. For example, perhaps your site offers an optional "live chat" interface and to keep initial...
Needs Cleanup
This article needs cleanup to meet our writing standards:
Spelling and punctuation
Code clarity
Avoid first person
Can you help? Click edit below!
Today i will be showing you...
Needs Cleanup
This article needs cleanup to meet our writing standards:
Spelling and punctuation
Code clarity
Avoid first person
Can you help? Click edit below!
Although i call it Ajax...
Script.aculo.us, by default, will run animations in parallel, which is great because you don't have to worry about the complexities of doing that yourself. These two effects will run...
TBD - Add links to more in-depth articles about this, plenty to choose from.
Early on, "webmasters" tended to put the HTML, style information, and JavaScript for a page all interwoven together in...
Know someone who could contribute to this wiki? Invite them to join us!
(Please be sure not to abuse this feature and irritate people.)
Please remember to INCLUDE YOUR EMAIL ADDRESS in your note below. (Don't worry, we don't give it out to people.)
Did you INCLUDE YOUR EMAIL ADDRESS? If not, please cancel your request on your...
We'd love to have you join us! Here's how:
Click the link below to get the "application" box — it's not really an "application", it's not like we're going to say no! :-)
Join Wikidot, if you're...
Needs Cleanup
This article needs cleanup to meet our writing standards:
{$details}
Can you help? Click edit below!
The Problem
Sometimes when you're trying to use some of Prototype's nifty Element extensions, they work on Firefox/Gecko, Opera, and Safari/WebKit, but Internet Explorer gives you the error "Object...
This page lists a calendar of when pages were created; you can navigate the list using the dates on the right. For a list of all changes (including edits), click here.
This page lists pages we'd like to see on this wiki but haven't had time to write yet.
Tip - Use a DOCTYPE - Discussing the need for a DOCTYPE and which ones may be appropriate for one's...
This wiki is all about the community. Pitch in! If you're not already a member, you'll need to join first.
Here are some places we need help:
We need: How To - Using Event Delegation
There are...
Welcome to the unofficial community pages for Prototype. For script.aculo.us, click here.
The official Prototype website is http://prototypejs.org.
Prototype API
Prototype Tips
Prototype How Tos
The official documentation for the Prototype API is on the API docs part of the Prototype website.
Here's some additional information from the community, to supplement the API docs...
The for..in construct isn't for looping through the elements of an array. You've probably been told it does, but they were lying to you. Details in this tip.
This page is for links to in-depth articles discussing using Prototype's advanced features. For quick, simple tips and tricks, check out the tips and tricks page.
How To - Hooking Events
How To -...
This page is for links to simple tips and tricks for someone new to Prototype, simple pages that demonstrate how you do simple things with the framework. For more in-depth articles, check out the...
This page lists some resources that are useful when doing web development — with or without Prototype & script.aculo.us!
Add-ons / Plug-ins
We have a whole page dedicated to...
If you're trying to request some content via Ajax.Request, Ajax.Updater, etc., and the request is failing, you may be running afoul of the Same Origin Policy: Your script can only retrieve content...
Welcome to the unofficial community pages for script.aculo.us. For Prototype, click here.
The official script.aculo.us website is (of course) http://script.aculo.us.
Please note: script.aculo.us...
The official documentation for the script.aculo.us API is on the official script.aculo.us wiki.
Note: As script.aculo.us has an official wiki, you'll probably find that there's much more content...
This page is for links to in-depth articles discussing using script.aculo.us' advanced features. For quick, simple tips and tricks, check out the script.aculo.us tips and tricks page.
Note:...
This page is for links to simple tips and tricks for someone new to script.aculo.us, simple pages that demonstrate how you do simple things with the framework. For more in-depth articles, check out...
As mentioned in the FAQ, when trying to figure out the source of a problem, it's frequently useful to create a small, self-contained test page for replicating the problem in isolation. Why? Two...
Home
FAQ
Troubleshooting
Extras / Add-Ons
Resources
Pitch In!
Editing this Wiki
Prototype
Prototype API
Prototype Tips
Prototype How Tos
script.aculo.us
script.aculo.us API
script.aculo.us...
Members:
Moderators
Admins
When using Prototype's Enumerable methods that expect a function as their argument, it's very easy to add an extra unnecessary closure. It's easy to make the mistake, but also easy to avoid.
For...
Width and height of element inside invisible ancestor
Prototype.js provides a nice getDimensions() method to determine dimensions of an element with display:none style set. This method works fine...
Prototype.js provides very useful object TimedObserver which periodically queries some value and executes callback when the value has changed. Prototype ships with two specialised TimedObservers -...
It is common task to find a checked radiobutton element and fetch its value.
It's easy to fetch value of element with known ID, but when you have many radio buttons checking each of the known IDs...
Sometimes there is a need to get last descendant element of same element. Prototype provides a method to get firstDescendant, but not the last one.
With Prototypes' excellent Element.addMethods you...
Suppose you have a div called 'myDiv':
<!-- In your HTML -->
<div id='myDiv'>...</div>
You can hook a handler function called doSomething to it using Event.observe like...
Don't use for…in:
var a, index;
a = ['a', 'b', 'c'];
for (index in a) // <= WRONG
{
alert(index + ' = ' + a[index]);
}
Despite what you may have been told, for..in is not for...
A frequent topic of discussion is minimizing download times for your scripts. Here are a few pointers.
Table of Contents
Minimizing File Count
Minifying / Packing
Gzipping
Google CDN
Further...
A frequent topic of discussion is minimizing download times for your scripts. Here are a few pointers.
Table of Contents
Minimizing File Count
Minifying / Packing
Gzipping
Google CDN
Further...
What libraries do you need to load, and in what order, to get the minimum download size but still make the effect you want work correctly?
First of all, the libraries must load in this...
When you want to run code when a page loads, usually you put an event handler on the window.onload event or the onload event of the body tag. The problem with that approach is that your code...
Many times, once you've loaded content dynamically (for instance, with Ajax.Updater), you want to script elements in the new content — attach event handlers, that sort of thing.
Perhaps you have...
Say you've hooked an event on a div called "myDiv" like so:
$('myDiv').observe('click', doSomething);
(Perhaps because you used this tip or worked through this "how to".)
You can unhook it...
When doing object-oriented web programming, it's quite common to want to have a method on a specific instance called as an event handler, or as the callback for something like Ajax.Request....
Needs Cleanup
This article needs cleanup to meet our writing standards:
Grammar
Can you help? Click edit below!
It is common question if it is possible to use Element.show() and...
The Problem
$H() is very helpful function used often to deal with so called associative arrays generated from PHP scripts. PHP uses json_encode() function to convert it's native arrays or object to...
This page is now over here: How To - Using Unobtrusive JavaScript.
The Short Version
It's extremely unlikely you want or need to use bindAsEventListener in your code. You almost certainly want bind instead. If you're not using a DOM0 handler you don't have control...
about
contact
join!
invite others
Plagued by errors? Does your Request go unanswered? Is your Effect ineffective? This is the place to look.
Table of Contents
Check the FAQ
Error Messages
Requests, Responses, and other Ajax-y...
What do you mean "unofficial"?
We mean that this site is not affiliated with the Prototype Core team or Thomas Fuchs. They are not responsible for its content, so if you see something here that's...
This wiki is a set of unofficial community pages for the Prototype and script.aculo.us frameworks. Here you'll find:
Additional API info, to supplement the official documentation
Tips and...
