Friday, January 13, 2006

Random Ajax - Fun with Lists 1

Random Ajax - Fun with Lists

There are a lot of ways to use Ajax, some of which are definitely better than others. People have been working on some great encompassing scripts that will simplify the handling of multiple Ajax uses on a website. A few of the most notable are script collections from Script.aculo.us, Prototype, and Behaviour. Note, that I did not include the now famous Ruby on Rails script collections that have become a framework for Ajax development with Ruby. The reason I did not was because it is specific to Ruby. The script packages that appeal the most to me are the ones that can easily interface with multiple languages (see those three named above).

I have made a little test page (one of many more I hope) that shows how you can script and implement some simple Ajax using the Script.aculo.us and Prototype base scripts. Feel free to look at the source code of sample page and see the underlying code. The only header script references actually needed in the document itself are these:

<script src="http://www.websitestyle.com/blog/prototype.js" type="text/javascript"></script>
<script src="http://www.websitestyle.com/blog/behaviour.js" type="text/javascript"></script>

There is an additional script that goes in the page also, and that can also be linked to separately. However, in order for the two scripts above to work, the rest of the collection (just a few extra js files) should reside on in files on your server also so they can be called if needed. There is an explantion of how to use those base scripts here on the Script.aculo.us site.

When you look at the draggable lists demo you will see some extra things added to it for formatting purposes. However, the only things actually required to make it run are labling the <ul> section for each list with the appropriate id (in this case either id=firstlist or id=secondlist), the script directly below the lists in the page, and those two scripts referenced above. Everything else is just to make it pretty or to enhance useability.

I will try to add more of these example pages, and go into some of the fun little ways you can toy with Ajax. In fact, I plan to actually do more with this example, so perhaps it will get updated later with additions). For now, hopefully this will be a fun little thing to take a look at.

~Nicole

No comments: