Flex, Java/JavaFX, Silverlight, AJAX & RIA Frameworks

RIA Developer's Journal

Subscribe to RIA Developer's Journal: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get RIA Developer's Journal: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


RIA & Ajax Authors: Javier Paniza, Pat Romanski, RealWire News Distribution

Related Topics: RIA Developer's Journal, ColdFusion on Ulitzer

RIA & Ajax: Article

Building a Drag-and-Drop Shopping Cart with AJAX

Creating an interactive shopping experience

Note that you can chain these methods together. For example, it is perfectly acceptable to write:

objGateway.resetArguments().setArguments( { state:'NY' } ).request()

Using what we know now, let's take another look at our updateCart() function that we're calling onLoad.

function updateCart() { objGateway.setListener('cartPacket_onReceive').setArguments(
{action:'getCart'} ).request(); }

The function chains together several commands. It sets the listener to "cartPacket_onReceive". That means that we'll execute this JavaScript function whenever data is returned from our gateway. This function handles the generation of our table body that contains our cart rows (see Listing 2).

In our updateCart() function, we're also passing in an argument: action=getCart. This is going to be passed through to our cart.cfm gateway page. The full text of the gateway page is displayed in Listing 3.

We're passing in the action variable with a value of "getCart". This gets passed to our cart.cfm gateway page and causes the user's session cart to be returned as a query object. Whenever we need to update our cart to add or delete rows, we'll set our listener to 'cartPacket_onReceive' and then redraw the table body.

When we created our shopping cart on screen, we added the following button to clear our cart:

<button onclick="emptyCartButton_onClick()" id="emptyCartButton">
Clear Shopping Cart</button>

We'll add two JavaScript functions to go along with that button. The first will confirm the delete and the second will issue a call to remove the items and redraw the cart:

function emptyCartButton_onClick() {
   if ( confirm('Are you sure you want to empty your cart?') ) clearCart();
}

function clearCart() {
   objGateway.setListener('cartPacket_onReceive').setArguments( {action:'clearCart'}
).request();
}

Finally one more JavaScript function to be called when adding items to our cart:

function addToCart(upc) {
   objGateway.setListener('cartPacket_onReceive').setArguments( { action:'addToCart',upc:upc }
).request();
}

Now that we have our addToCart() function coded, add the line "addToCart(element.id);" right before the Element.hide call in the shopping cart droppable. This will execute our addToCart() function and redraw the shopping cart when an item is dropped onto it.

And that's all there is to it! With just 150 lines of code, we were able to create an interactive, drag-and-drop shopping experience that many did not think was possible using just the browser.

More Stories By Joe Danziger

Joe Danziger is a senior web applications developer with Multimax, Inc., a provider of Enterprise IT Services and Solutions supporting the critical missions of the Air Force, Army, Navy, and other Department of Defense components. He is certified as an Advanced Macromedia ColdFusion MX Developer, and also maintains the Building Blocks site (www.ajaxcf.com) dedicated to AJAX and ColdFusion, as well as DJ Central (www.djcentral.com), a Website serving DJs and the electronic dance music industry.

Comments (22) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
King 05/21/08 03:33:54 PM EDT

Soon everything will be Ajax, just look how the major websites are adapting to use it.

A 05/07/08 01:02:58 PM EDT

I think your right when you say that Ajax is the way of the future, although its is difficult to program, you can see yahoos and googles implementation of it.

Scott 08/02/07 12:04:03 PM EDT

Hello N,

I had the same problem. Try changing:

to:
<cfif StructKeyExists(xnSearch.Items.Item, "MediumImage")>

N 07/14/07 10:19:57 AM EDT

I'm following this tutorial to the letter as well and I also get this error in the code that retrieves the info from Amazon...

Element ITEMS.TOTALRESULTS.XMLTEXT is undefined in XNSEARCH

Is there a fix available or anything to get this to work. It looks good though.

N

asdf 07/10/07 01:17:36 AM EDT

asdfsafs asdfasf asdfasf

abcd 07/10/07 01:14:52 AM EDT

heloow asdf asdfs asdfasf biuiouer asdfaf boihoi awerew asdf

Wally Kolcz 01/22/07 09:27:35 AM EST

I loved your tutorial on how to make a drag and drop web cart, but I couldn't quite follow on how to put the code into the page to make it work. Do you have any finished files available for download to see how it is constructed?

Thanks

BUses 12/26/06 08:45:23 PM EST

Awesome content: L'augmentation d'AJAX pendant plusieurs mois passés a repris du monde de développement et a donné un second souffle au Web.
Merry Christmas of Poland!

Simone from Italy 12/20/06 10:54:21 AM EST

Hi, please add a link to index.cfm full compliled because It's very hard to have a union of all fragments introduced in your article. Thanks

Danny 10/31/06 04:09:38 AM EST

I'm following this tutorial to the letter and I get this error in the code that retrieves the info from Amazon...

Element ITEMS.TOTALRESULTS.XMLTEXT is undefined in XNSEARCH

Any ideas? Thanks for this tutorial!

j j 09/21/06 02:01:43 PM EDT

Keeping up with the latest Web technologies is tough nowadays. Every week it seems new sites are launched that push the envelope further and further in terms of what can be accomplished using just a Web browser.

Student Organization Guy 08/05/06 04:28:22 AM EDT

How is user experience improved with dragging items into a shopping cart? ;) This is just developer feature candy. There are many other site components to focus your time on that will improve your application. Don't work so hard just to remove your 'add to cart' buttons.

CFDJ News Desk 08/04/06 04:20:22 PM EDT

Keeping up with the latest Web technologies is tough nowadays. Every week it seems new sites are launched that push the envelope further and further in terms of what can be accomplished using just a Web browser.

AJAXWorld News Desk 08/04/06 03:46:57 PM EDT

Keeping up with the latest Web technologies is tough nowadays. Every week it seems new sites are launched that push the envelope further and further in terms of what can be accomplished using just a Web browser.

AJAXWorld News Desk 08/04/06 03:46:48 PM EDT

Keeping up with the latest Web technologies is tough nowadays. Every week it seems new sites are launched that push the envelope further and further in terms of what can be accomplished using just a Web browser.

AJAXWorld News Desk 08/04/06 03:35:26 PM EDT

Keeping up with the latest Web technologies is tough nowadays. Every week it seems new sites are launched that push the envelope further and further in terms of what can be accomplished using just a Web browser.

AJAXWorld News Desk 08/01/06 04:10:49 PM EDT

Keeping up with the latest Web technologies is tough nowadays. Every week it seems new sites are launched that push the envelope further and further in terms of what can be accomplished using just a Web browser.

barb 08/01/06 03:52:54 PM EDT

I also have been struggling to get this example to work. It is not clear to me if I have to have a Coldfusion server running. Currently, I do not. I simply followed the instructions in the article. I'm getting the Javascript error "gateway not defined" from the line of code where I try to instantiate it: objGateway = new gateway("srs/cart.cfm?");. Can you please provide more information or a complete code listing?

Thank you!

bill 02/10/06 11:35:56 PM EST

The app is great but I'm also struggling to get it to work. I'm not giving up!
Hi Joe,
could you please post the full code file or send us by email.
Thanks,
b.

Kenny 02/08/06 07:10:32 PM EST

This is one of the most frustrating examples I've ever tried. I cannot figure out how to assemble this application. It is not well written at all in my opinion. Why is there not a clear list of all the code somewhere? I came to the website to download the code, so I could simply paste it and watch it work. But instead I've been stressing for the last 40 minutes just trying to figure out how to get it all together, and I simply cannot. I give up!

SYS-CON Brazil News Desk 01/27/06 02:28:32 PM EST

Keeping up with the latest Web technologies is tough nowadays. Every week it seems new sites are launched that push the envelope further and further in terms of what can be accomplished using just a Web browser.

Colm Brazel 01/24/06 08:54:51 AM EST

Hi,

I'm reading the online digital edition version
of this article, page 2 ends without giving the complete listings of the code given in the article, so, for example, I don't have the code to search amazon to test. Code listings are invaluable to check article contents with hopefully verified working version.

cheers

Colm