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

4 thoughts on “Moving from Prototype to jQuery

  1. Been a long time user of appgini … looking forward to this change as I tend to modify the appgini code for UI enhancements … this will significantly improve my ability to do that. I hope you’re doing this change independently from making appgini a server-based code generator. Any idea when this effort will be done? thx!

    1. Hi Dave,

      Thanks for your comment. I hope the new version would be ready by mid October .. and yes, this change would apply to both the desktop version and the planned online version.

      1. Great. This should also make it much easier to make a mobile-friendly form with jQuery mobile. That will be huge. Looking forward to it.

Leave a Reply

Your email address will not be published. Required fields are marked *