Prototype

Useful Links

• Excellent Prototype examples and tutorials.
• Good check list of things to do and to avoid in Prototype.

Notes

• Binding is one of the most useful functions in Prototype. In particular, when iterating over objects with an each and a defined function, the function won't be binded to the current object. You must manually bind it.

• When using classes, use the Prototype classes functions (Class.create()). In Prototype 1.6 the syntax is nice.

• evalJSON() works well, but not the same way as eval() as it is a String method, thus you call it directly on your JSON string.

Ajax and JSON

• If you put JSON information into the X-JSON HTTP header, it will get automatically evalued by Prototype and available as the json object (second argument of the callback). This way of transferring data is not recommended however. The main reason is that HTTP headers seem to be limited in size: with big strings, Jetty throws out an exception. There are other drawbacks: no new lines must be present on a HTTP header (only one line)... So it is better to use the following technique.

• The recommended way to send out data is to set the MIME type to "application/json" and then reply with a pure JSON response. Prototype will automatically evaluate the data and place it in the transport.responseJSON object. If you need to send HTML pages, they can be easily included as a JSON object. You never have to call evalJSON() with this technique.

• Note that JavaScript code can also be directly executed if the correct MIME type is used. I am not too sure if JSON and JavaScript can be mixed easily.

Element

• When using getSyle() on an element, you must not use any kind of shorthand for the CSS property. Strangely, "border", "border-width" won't work for example. You must use "border-top-width".

Events

• Registering an event on the body does not seem to work very well through Prototype. But you can just register the event directly on the document object and it will work as expected.

Forms

• If you have a DOM element of a form, don't use element.readAtribute("value") to obtain its value as it will give you the initial value of the form. Use $F(element) directly (or element.getValue()).