Dr Nic

Extend Prototype $() yourself

If you’re using the prototype javascript library, its fun to add methods directly to the $() object.

So instead of typing:

new Effect.Move($('target-obj-name'), {x: 40, y: 50, mode: 'absolute'});
new Effect.Pulsate($('target-obj-name'));

You could type:

$('target-obj-name').moveTo(40,50).pulsate();

Much sexier. You could add any methods you want to $() to do anything you need to do in your application. Just reproduce the example below in a Javascript file (say prototype-extensions.js and include it in your web pages, using <script src="prototype-extensions.js"></script>):

Element.Methods.moveTo = function(element,x,y) {
    new Effect.Move(element, {x: x, y: y, mode: 'absolute'});
    return element;
}
Element.Methods.pulsate = function(element) {
  new Effect.Pulsate(element);
  return element;
}

Element.addMethods();

The methods you want to add to $() need to be added to the Element.Methods hash (so in the example above, Element.Methods.moveTo and Element.Methods['moveTo'] are equivalent in Javascript), with the first argument of the function being the target element.

Finally, you need to formally tell Prototype that these methods must be added into future $() objects, using the command Element.addMethods().

Now you can add any method to your $() objects that you want. Just like magic.

Ajax on Rails – Prototype vs JQuery

[Original article published on DevLounge - please post comments there]

When you unpack your shiny new version of Rails and generate your first Ajax link, you are using the Prototype library. It’s beautiful to use. It adds many Rails-like constructs into the Javajscript language, e.g. the each method to iterate a closure over an array. Sexy stuff.

But the following effect isn’t done using Prototype:

It was done in a few lines of Javascript using the jQuery library [1].

$(".tick").hover(function() {
  $(this).removeClass("tick-off").addClass("tick-on").announceButton(this)
}, function() {
  $(this).removeClass("tick-on").addClass("tick-off");
});

Prototype provides a comprehensive library of base classes, such as Element and Hash, where as jQuery is fundamentally different. It provides just one entity – the jQuery object. This is created using the familiar $ function and represents a collection of DOM nodes, rather than just one.

The jQuery object is then extended and extended and extended with all the functionality you need – scriptaculous-like effects, Ajax calls, prototype-like manipulations, etc. JQuery plugins

Yehuda Katz – author of autoDB – the dynamic admin console for Rails apps – has his feet deep in jQuery land as well. He manages the Visual JQuery documentation, and recently wrote an article comparing the philosophies of Prototype and JQuery, to help people understand how they are different.

The core problem for Rails developers who might like to try out jQuery is that it eventually conflicts with the prototype library when you start to use Rail’s “in-built” helpers for prototype.

But perhaps you do not need to use these helpers, as an increasing number of jQuery plugins start to provide more and more elegant client-side functionality. For example, an InPlaceEditor extension, and many others.

Want something truly pretty developed using jQuery – how about the planets revolving around the sun?

Work is also underway to integrate jQuery into Rails, including its own set of helpers, code named JQuails.

Many Rails developers might not be familiar with the abilities of alternative Javascript libraries as they get prototype/scriptaculous embedded for free. Yet it would be wise for all developers to be aware and competent in multiple frameworks, so that the best tools for each job can be selected. There is certainly some momentum behind jQuery in the wider development community. To Rails developers I say, Keep a Look Out!

[1] The Hover Demo Script was written as pure Javascript to make it easy to download. Firstly it disables the static image (for RSS feed and non-JS environments), and then creates the DIVs for the effect. The hover effect is then setup by applying the hover function to all elements of the class tick. The two functions we pass it perform the CSS class manipulation that gives the effect. Note the use of chain calls that make the syntax so attractive.

Note also that we’ve added a custom function to the jQuery object – announceButton. It assumes that only one button is active at a time, uses this[0] to determine which one it is. The function then returns the jQuery object (stored as this) to allow the standard method chaining to continue.