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.


Comments

22 responses to “Script.aculo.us Is My New Best Friend”

  1. Kinda disappointing that this library is not designed with OO methodologies, taking full advantage of PHP5 and its new features…

    One should be able to this:

    include(‘sajax.php’);

    $objSajax = new Sajax();
    $objSajax->addFunctions(‘x_updateTitle’);
    $objSajax->handleClientRequest();

    Perhaps its just me, but I tend to shy away from libraries that aren’t written for the latest version of the language they are written in.

  2. Which is why SAJAX sucks and Script.aculo.us is groovy. Script.aculo.us, built on Prototype, is Object Oriented (well, as OO as you can get with Javascript) and leaves the PHP up to the developers.

  3. […] Matt recently came across and got very excited about Script.aculo.us for doing DHTML effects and AJAX. […]

  4. […] I’ve been screwing around with DOM Manipulation for a few years now, doing stuff sporadically here and there. With my development of MasterWish and my recent interest in Script.aculo.us, I often find myself forgetting the various objects, functions and attributes relating to nodes. Hence the reason for this post. I want a quick and easy way to find the information…So, here’s a quick run-down of node structure: […]

  5. […] Ajaxian has posted a podcast of their interview with Thomas Fuchs, the creator of Script.aculo.us. Ajaxian summarizes the content that is discussed: […]

  6. […] I have often mentioned my process of expanding my proficiency of Ajax. Through my journey I have made a number of wrong turns and hit my share of stumbling blocks. All of that has been a learning experience and I’m learning still. I began fiddling with XMLHttpRequest as many do – blissfully ignorant of the many frameworks that exist to make Ajax super easy. My code was bloated with some neat…’features’ (pronounced: bugs). […]

  7. I feel that a reference to XAJAX is necessary here. I started off by using SAJAX, but now I’m hooked on XAJAX because of how easy it is to place the resulting html back into the document. No need for a callback there.

    Example server-side function:

    function dostuff($a) {
    $obj = new xajaxResponse() ;
    //perform whatever operation here
    $result1 = $a . “bla” ;
    $result2 = $a . “bli” ;
    $obj->addAssign(“div1”, “innerHTML”, $result1) ;
    $obj->addAssign(“div2”, “innerHTML”, $result2) ;
    $obj->addScript(“Element.show(‘div1’);”) ;
    return $obj->getXML() ;
    }

    That’s it. The rest (calling the php function via javascript, as well as the setup) is similar to SAJAX. http://www.xajaxproject.org

    Fanis

  8. […] MasterWish was built using SAJAX as the tool of choice for Ajax communication but as I’ve mentioned in the past, I am a Prototype convert. My knowledge of Ajax, JSON, and general application structure has been morphing so much in recent weeks that I have held off in completely revamping the wish list site. […]

  9. […] Great news over at Mir.aculo.us. It appears as if version 1.6 of my favorite DOM manipulation library, Script.aculo.us will be out soon. Thankfully the new version of Script.aculo.us will be using Prototype v1.5. […]

  10. […] As Ajax methodologies (and even Cross Domain Scripting) become more commonplace, data format becomes vital to the efficiency of our applications. The Zimbra folks seem to have realized this and subsequently re-architected their entire application. Oh, and Script.aculo.us creator Thomas Fuchs seems to agree and stats his opinion on XML in Ajax communication: Its dog slow…don’t do it. […]

  11. Hi,

    Could you publish a couple of simple database example using both Sajax and Script.aculo
    to see the difference more clearly. Thanks.

    I’m having a hard time trying to get something to work against a database. I use Oracle.

    Have a nice day and thanks in advance for the reply.

    Regards,

    Rudi

  12. Check out http://www.planjam.com/date.php

    The site urelies heavily on AJAX, uses Prototype, and does an excellent job with many aspects of the script.aculo.us library.

  13. this is to see how comments look

  14. I prefer Sajax, because I managed to learn it and fully understand it, and it’s actually easy to use.

    Sajax is way better :D… really
    Sajax rulez!

  15. […] THEN tackle Prototype and Script.aculo.us […]

  16. The problem comes when the “pros” that develop such libraries widely demonstrate uses that are blatantly bad from a usability point of view. They should be encouraging good uses, not promoting bad ones.

  17. […] I went to The Ajax Experience with high expectations of catching some great tips regarding development in an Ajax environment. At the same time, I was sure of my previous decision with the use of Prototype and Script.aculo.us was as good as it gets (without diving into the widgetized world…e.g. Dojo). I attended John Resig’s presentation on jQuery and I became a convert. […]

  18. Nice:)
    They should be encouraging good uses, not promoting bad ones.

  19. Hmmm… I think this is the third time I’ve heard about scriptaculous this week. Must be a sign! I haven’t tried SAJAX out yet, but am glad to hear about both SAJAX and Scriptaculous, as I’m also just starting (and only just) at looking at AJAX. Haven’t used it yet, but the concept is great. This is fantastic, perhaps this will mean a lot less time wasted. Thanks for this!

  20. Are you sure you’re new to this? It looks like you’re already a pro. Thanks for a very detailed post. I’m trying to consolidate everything and trying them out myself so I can share them to my students.

  21. very good site