Tricklin

After spending a considerable amount of time looking for a decent example of "how to store the newly sorted order of a list after dragging and dropping", I realized that there isn't a whole lot of examples and documentation out there. I've decided that it's my turn to try and come up with a full blown, easy to understand example using XHTML, Javascript, PHP, and mySQL.

First off, you'll need both the scriptaculous and prototype javascript libraries (both available from script.aulo.us). Once you've downloaded these files, you'll need to reference them in the head of your file:

Read the rest of this entry »

As I mentioned in my previous post, I planned on creating a "tutorial that will walk you through a real world working example of AJAX using ColdFusion and a simple MS Access Database." Well, here it is:

In order to represent a working example of AJAX, there are a few things we're going to need.

• database
• HTML file
• JavaScript (located within the HTML file in this example)
• ColdFusion file (note: any programming language can be used)
• prototype JavaScript library

The Database

The database used in this example is an extremely basic MS Access database consisting of one table that contains 6 fields:

Now that we know what we are going to be storing, let's take a look at the ".html" file.

HTML File

This file will consist of the form fields needed to populate the database, along with the placeholder we will use to show the information being stored:

<form name="addEmployee">
First Name:<input type="text" name="FirstName" id="FirstName" value="" size="30" />
<br />
Last Name:<input type="text" name="LastName" id="LastName" value="" size="30" />
<br />
Job Title:<input type="text" name="JobTitle" id="JobTitle" value="" size="30" />
<br />
Phone:<input type="text" name="Phone" id="Phone" value="" size="12" />
<br />
Fax:<input type="text" name="Fax" id="Fax" value="" size="12" />
<br />
<input type="button" name="submit" value="save" onclick="insertEmployee();">
</form>
<div id="EmployeeList"></div> //placeholder div

Notice how there is no method or action in the form tag? Both of these will be taken care of by the JavaScript.

Read the rest of this entry »

All in all, I'd have to say I had a very pleasant experience using AJAX for the first time. The most difficult aspect of working with AJAX, was learning how to implement it. Once I found the right documentation, it was relatively smooth sailing.

Getting Started

First off, you should download an AJAX library. I recommend the Prototype javascript library. What is prototype.js anyway?

Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest AJAX library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

Basically, a guy named Sam Stephenson spent, I'm sure, an inordinate amount of time writing this great javascript file in order to make life easier on all of us. Using this file makes writing your AJAX code much easier. As mentioned earlier, the hardest part about getting started was finding documentation. So, in order to make it simpler for you, I'm going to include links to the documentation that I used to get started.

• Developer Notes for prototype.js - This documentation was exactly what I needed, and could quite possibly be the only thing you'll need. It contains some really great examples in the beginning of the document, and the contains more detailed information later on. After reading the first few paragraphs, I was able to get started, and then used the rest of the document for reference (this part of the document conveniently happens to be named "Reference for Prototype.js") haha.
• Working With Events In Prototype - How to use prototype with Keystrokes, Mouse Clicks, Mouse Hovers, etc.
• Eas y Ajax with Prototype

Read the rest of this entry »