Wednesday, August 30th, 2006

Prototype Changes

Category: Prototype

Justin Palmer has updated us with a bunch of recent Prototype updates including:

  • Chainability: A bunch of methods now return their first arg so we can change together methods

    1. $(“sidebar”).addClassName(“selected”).show();
    3. $('sweet').observe('click', function(e) {
    4.     console.log("%s was clicked", Event.element(e));
    5. }).setStyle({color: 'red'});
  • Form and Form.Element methods mixed in to $ and $$
  • Shorter syntax for Event Observing:

    1. $('element').observe('click', function(e) {  alert(e); });
  • Backwards Compatability: Element.toggle,, and Element.hide no longer take an arbitrary number of arguments
  • Add serialization and observation support for input type=search
  • Simulate non-GET/POST requests by POSTing with a _method parameter set to the actual verb
  • Make Element.update() handle TABLE-related elements with the DOM API because of IE’s missing .innerHTML property on them
  • and many more.

Posted by Dion Almaer at 12:25 pm

3.6 rating from 30 votes


Comments feed TrackBack URI

Finally, looks almost as easy as jQuery now.

Comment by Kingsley Joseph — August 30, 2006

Yep – and that’s prototype’s only chance to catch up with jQuery. I hope development in this direction will continue – always in scope to be more lightweight and performant.

Comment by .mario — August 30, 2006


Prototype has been lagging lately, finally some activity! It’s still the king as far as I’m concerned, there are lots of good alternatives now.

Comment by Jon — August 30, 2006

My first reaction also, chainability, table elements, all part of jquery pre 1.0

Comment by Gilles — August 30, 2006

My first reaction also, chainability, table elements, all part of jquery pre 1.0

Well pack it up guys, I guess jQuery wins the internet.

Seriously, what is your point?

Comment by henrah — August 30, 2006

Interesting Finds: August 30, 2006

Trackback by Jason Haley — August 30, 2006

better option is to use Prototype and jQuery along…
but, you just need to replace prototype $() function by some other name to prevent conflict with jQuery $() function…
its fun and max problems are solved.

Comment by Google Logs — August 31, 2006

Chainability is nice, but it can get abused too easily.

Is that code, with observe and setStyle chained, really clearer than having it in two lines? Are both actions related somehow so that conceptually it makes more sense chaining them together?

Comment by Gonzalo — August 31, 2006

Unfortunately, what these people still don’t get is that at some point, we need proper documentation… are you all too wet2.0 when you have to read the actual library to find out what you can do with it?

Comment by Sad developer — August 31, 2006

[…] Prototype ha realizado una serie de mejoras en su código para conseguir la posibilidad de encadenamiento de funciones entre otras mejoras. […]

Pingback by Mejoras en Prototype - aNieto2K — August 31, 2006

[…] I found this article via Ajaxian regarding a nice block of Prototype updates. […]

Pingback by BorkWeb » Prototype Changes — August 31, 2006

@Sad Developer: Real coders read code ;) I agree, Prototype’s trailing jQuery on documentation – but that’s also because it’s far more capable. But for the average SOB like me who doesn’t need that much jQuery’s where it’s at.

Comment by Kingsley Joseph — August 31, 2006

I’ve solved the same problem, in an application which uses Prototype and jQuerry at same time (this if the case for the UI TABS Library used in conjunction with SCRIPT.ACULO.US portal Boxes). The Solutions is very simple

1) First you need call the jQuery.noConflict() method
and replace all the $ by jQuery, example

If we have something like this:

$( function(){
$(‘#container-0 ul’).tabs({ disabled: [] });

Replace it by this:

jQuery( function(){
jQuery(‘#container-0 ul’).tabs({ disabled: [] });

Do this for ALL function files which use JQUERY


2) Replace the “function $(” definition in the prototype.js file
and in all parts in that file which uses $(, by said, $X

then the line 1249 of the prototype.js file which looked:

function $(element) {

will look now:

function $X(element) {

do the same in all function-calls “$(” in prototype.js

3) Do the same in all function-calls “$(” in all JavaScript files which uses Prototype.

It should work fine ;)

Comment by StarBoy — October 26, 2007

Leave a comment

You must be logged in to post a comment.