Tag Archives: prototype

Moving from Prototype to jQuery

AppGini used to use Prototype and Scriptaculous javascript framework for client-side scripting. It’s a great framework but it’s not being frequently updated any more, and finding plugins for it is getting harder. So, I decided to move on and migrate to jQuery. jQuery is in very active development, has a huge user base, has a huge library of actively-developed plugins, and is used by many great client-side frameworks, like bootstrap for example.

During the migration, I created a checklist of code lines I needed to change. I thought this would be useful for anyone who wishes to follow this path. Feel free to add your own points in the comments.

Prototype code To convert to jQuery, replace with
document.observe("dom:loaded", function(){ some_code }); jQuery(function(){ some_code });
$$(selector)[x] jQuery(selector).eq(x)
$('id') jQuery('#id')
.style.x = 'y' .css({ x: 'y' })
.checked .prop('checked')
.disabled .prop('disabled')
.some_attr .attr('some_attr')
.value = x .val(x)
.observe('event', function(){}) .event(function(){})
$F('id') $('#id').val()
.fade({duration: x}) .fadeOut(x * 1000)
.appear({duration: x}) .fadeIn(x * 1000)
Effect.Appear fadeIn()
Effect.Fade fadeOut()
.update('new content') .html('new content')

Tip: To work directly with DOM methods after selecting an element through a jQuery selector, use get(0) or [0] .. for example:

jQuery('div#author')[0].style
// or
jQuery('div#author').get(0).style