We’ll its almost 2007. And not a moment too soon. Lets hope this next year is better than the last.
AJAX First Steps
So, yeah, its Christmas eve…and guess what I had some extra time this afternoon! So, I decided to take some of the initial steps to learn AJAX. I decided to start off with prototype. For a pretty simple example I found a quick zip code lookup tutorial by Pete Freitag.
Here are the peices/parts:
The HTML
<link rel="stylesheet" type="text/css" /> <script type="text/javascript"></script> <script language="javascript" type="text/javascript"></script> <form> zip: <input style="background-color: #ffffa0" name="zip" id="zip" onkeyup="checkZip();" type="text" /> </form>
The JavaScript (ZipCode.js)
function checkZip() {
if($F('zip').length == 5) {
var url = 'checkZip.cfm';
var params = 'zip=' + $F('zip');
var fullUrl = url + "&" + params;
var ajax = new Ajax.Updater(
{success: 'zipResult'},
url,
{method: 'get', parameters: params, onFailure: reportError});
}
}
function reportError(request) {
$F('zipResult') = "Error";
}
The ColdFusion (checkZip.cfm)
<p class="badzip">Please enter a valid zip code. SELECT name, state FROM zips WHERE zip = </p><p class="goodzip">#ziplookup.name#, #ziplookup.state# </p><p class="badzip">Zip code not found.
There is also a zip code db (MySQL) for the data end of things.
Considering the lack of code I’m thinkin’ that is pretty slick to get external data into an HTML page with no page refresh. I’m pleased so far.
Helpful resources found so far:
Quick Guide: http://particletree.com/features/quick-guide-to-prototype/
Scriptaculous Wikie for Prototype: http://wiki.script.aculo.us/scriptaculous/show/Prototype
Unofficial Prototype documentation: http://www.sergiopereira.com/articles/prototype.js.html#UsingAjaxUpdater
Merry Christmas!
Merry Christmas!!!
Christmas time ole skool!
I want to learn AJAX
Becuase I have tons of extra (ha!) time and incessant need to learn new things, I’m going to start a project that I’ve had in mind for a while: The project is a simple system to manage development items associated to multiple projects. Beacuse I want to learn about AJAX and its associated frameworks, I figured that I’d attempt the project while evaluating the following: script.aculo.us & Spry.
I’ll keep you updated on the progress, and any information/comments you can push my way will be greatly appreciated.
Also, I believe that the Rocky Mountain Adobe User’s Group is planning a presentation on AJAX in January.
RMAUG Resources
As promised here are the links & resources for the “No More Flex Clones!” Presentation given last night’s at the RMAUG User Group Meeting:
Initial inspiration and source of much of the presentation content (This is where you can grab the source skin files):
Designing Flex 2 skins
http://www.adobe.com/devnet/flex/articles/flex_skins.html
Cool explorer app built by Adobe Consulting…nice place to start with Flex & CSS:
Flex 2 Style Explorer
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
Great set of captivate movies by Jesse Warden about getting a design into Flex.
Photoshop -> Fireworks -> Flex: End to end designing for Flex applications
http://www.jessewarden.com/flex/photoshop_fireworks_flex/









