Script.aculo.us Is My New Best Friend

Ajax is great. DOM manipulation is sexy. I’m fairly new to the Ajax world having only developed with with it since July. MasterWish was my guinea pig and continues to be my playground for all things Web 2.0. Luckily, my manager Ken is pumped up about this whole Web 2.0/Ajax thing which has allowed me to experiment with my projects at work as well and PSU should expect to see some sweet apps roll out over the next year!

Since July, I’ve been developing my Ajax applications and examples using SAJAX (Simple Ajax), a PHP/Javascript framework for Ajax development. It was great at first glance…a lot easier than building Asynchronous Javascript transactions from scratch. But despite its ease, it was a bit clunky. Last week I was stumbling around the web looking for anything new to suck up and found a beauty of a tool. Script.aculo.us.

Script.aculo.us is a Javascript Effects and Control framework developed by Thomas Fuchs, a software architect living in Vienna, Austria who, like me, was disappointed by current web application frameworks that made no sense to him. His framework is 3 things: Easy to Use, Simple, and Easy to Use. His libraries – built off of the Ajax framework, Prototype – blow SAJAX out of the water! Let me give you an example to, say, update a news title on an article (I won’t include the HTML markup as that is trivial):

Here’s what needs to be done to build a SAJAX call:

Step 1: Create a SAJAX Call Function

function x_updateTitle()
{
	sajax_do_call('/process_ajax.php',"x_updateTitle", x_updateTitle.arguments);
}

Step 2: Create a server side function to handle the update

< ?php
function x_updateTitle($news_id,$news_title)
{
	//do some database calls to update the title;
}
?>

Step 3: Edit the server side SAJAX file (process_ajax.php) and add x_updateTitle to the list of valid call functions

< ?php
include('sajax.php');
addFunctions('x_updateTitle');
handleClientRequest();
?>

Step 4: Call the SAJAX Javascript function from somewhere (in an onClick, onSubmit or something)

<a onClick="x_updateTitle(1, document.getElementById('news_title').value, 'callbackFunction');">asdfdf</a>

Here’s the equivalent in Script.aculo.us
Step 1: Create a server side function to handle the update

< ?php
function x_updateTitle($news_id,$news_title)
{
	//do some database calls to update the title;
}
?>

Step 2: Call the Script.aculo.us Javascript function from somewhere (in an onClick, onSubmit or something)

<a onClick="new Ajax.Request('/process_ajax.php', { asynchronous:true, parameters:'news_id=1&news_title=$(\'news_title\')', onSuccess:callbackFunction });">asdf</a>

Thats it! Its a big difference. Thats just the tip of the iceberg. Script.aculo.us has many features for implementing Drag and Drop with one line of Javascript code; fancy display/hide functions; dynamic DOM Element creation/deletion; field autocompletion; and various other visual effects. It slick. And to top it off, the Script.aculo.us website is pretty sweet! Luckily the documentation is excellent and is in wiki format. As Plymouth State moves into the Web 2.0 world, I’ll be pushing for Script.aculo.us/Prototype to be our Ajax standard. I have seen the light and it is good.

MasterWish

If you have ever made an Amazon wish list (or any wish list feature from any store), then you know how handy it is…how easy it can be to add items. But, despite the wish lists’ ease of use, you typically end up with managing more than one list…which is an irritating task. Enter: MasterWish, a new kind of wish-list. For the better part of this year Jon Emmons, Zach Tirrell and I have been working hard on this site and we are happy to announce that it is now ready for prime-time.

Ok, so whats the deal with MasterWish? Why did we make it? What is its purpose? Well, our goal was to create a centralized wish list site to house your needs and desires (as most wishlists do)…but we wanted the wish lists to be store independant. With MasterWish, you are able to create lists of items from any site you want (heck, your items don’t even have to be from a website…you can add items that you want to pick up at the grocery store). My friend Jon said it best when he wrote:

MasterWish is a wish list site with a whole lot more. Items on MasterWish can be from anywhere. Make up your birthday list with items from your favorite online vendors, but don’t stop there… You want things that may not come from online vendors. How about that nice lilac you saw at the garden center? Or that circular saw from the hardware store? Add those too! You can list items from anywhere and enter a web URL, a description of where to find it, or both!

Once you have a bunch of items you can organize them into lists. I have lists for music, videos, kitchen toys, and more, but the great thing is items can belong to more than one list. My birthday is coming up so I created a birthday list and added items from all my categories to it. It’s that easy.

The other big difference with MasterWish is you can control who sees your wish lists. You can create a wish list of what you want from friends and one for family and control who can see them.

MasterWish is still in beta, so we’re still working on improving and streamlining the site. If you have any suggestions please leave them at the Bugs & Suggestions link. We’ll do our best to implement everyone’s suggestions.

I hope you enjoy the site, make lots of suggestions, and get everything you wish for.