Tips & Tricks
Ajax overhaul, Part 1: Retrofit existing sites with Ajax and ...
Like this document? Why not share!
by Timothy Perrett
London Scala UG - Lift:Getting star...
by Skills Matter
Get started with DB2 Performance Ex...
Scala and Lift presentation
by Łukasz Kuczera
Lift 2 0
Email sent successfully!
Show related SlideShares at end
Ajax overhaul, Part 1: Retrofit existing sites with Ajax and ...
Apr 29, 2010
Comment goes here.
12 hours ago
Are you sure you want to
Your message goes here
Be the first to comment
Be the first to like this
Number of Embeds
No notes for slide
Transcript of "Ajax overhaul, Part 1: Retrofit existing sites with Ajax and ..."
ibm.com/developerWorks developerWorks® window. It demonstrates how much information the site offers users about the products they're customizing. Although the optimal user path is a straight line from search and results to customization and purchase, the interface offers several detours from this route. The site uses traditional pop-up windows to present small chunks of contextual information about each product and product option. Click Pizza, and you see information about the site's pizza product. Click Cheese, and you see information about the available cheeses for your pizza. In addition, users can navigate to the manufacturer's Web site—also rendered in a pop-up window. Figure 1. The Results page 1.0 If users want to get even more details, the site offers a Product Details page with far more information about each product -- pictures, articles, user reviews, and so on. Finally, if users want to see how individual products stack up against one another, Retrofit existing sites with Ajax and jQuery © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 5 of 19
ibm.com/developerWorks developerWorks® After you've downloaded the source code for the version 1.0 application, look at the markup for one of your pages. It should look like Listing 1. Listing 1. HTML code for results.html 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Customize Me Now: Search Results</title> <link rel="stylesheet" type="text/css" href="../css/customizemenow.css"/> </head> <body id="CMN"> <!--[header goes here]--> <div id="main"> <form method="GET" action="comparison.html"> <h1>Search Results</h1> <div class="buttons"> <input class="button" type="submit" name="submitTop" id="submitTop" value="Compare Selected Products" /> or <a href="index.html">search again</a> </div> <table class="searchResults"> <thead> <tr> <th>Product</th> <th>Description</th> <th>Options</th> <th>Compare</th> <th>Actions</th> </tr> </thead> <tr> <td class="name"> <a target="productPopup" href="productPopup.html?product=A">Pizza</a> </td> <td class="desc"> A delicious Italian treat.<br /> [<a href="detail.html?product=A">full product details</a>] </td> <td class="options"> <ul> <li> <a target="optionsPopup" href="optionsPopup.html?product=A">crust</a> </li> <li> <a target="optionsPopup" href="optionsPopup.html?product=A">cheese</a> </li> <li> <a target="optionsPopup" href="optionsPopup.html?product=A">toppings</a> Retrofit existing sites with Ajax and jQuery © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 7 of 19
ibm.com/developerWorks developerWorks® </div> </noscript> <!--[content goes here]--> <noscript> <div class="buttons"> <input class="button" type="submit" name="submitBottom" id="submitBottom" value="Customize Now" /> or <a href="cart.html">add to cart with default options</a> </div> </noscript> </form> </div> The HTML for the main content <div> of your Comparison page looks like the code in Listing 8. Listing 8. HTML code for comparison.html 2.0 <div id="main" class="inline"> <h1>Product Comparison</h1> <table class="productComparison"> <thead> <tr> <th>Product</th> <th>Pros</th> <th>Cons</th> <noscript> <th>Actions</th> </noscript> </tr> </thead> <tr> <td class="name"> <a class="jTip" name="About Pizza" id="pizza" target="productPopup" href="productPopup.html?product=A">Pizza</a> </td> <td class="pros"> <ul> <li>Great flavor.</li> <li>Low cost.</li> <li>Fun with friends.</li> </ul> </td> <td class="cons"> <ul> <li>Can make you fat.</li> <li>Not very nutritious.</li> </ul> </td> <noscript> <td class="action"> <a class="button" href="customize.html?product=A">customize product</a> <a class="button" href="cart.html?product=A">add Retrofit existing sites with Ajax and jQuery © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 13 of 19
developerWorks® ibm.com/developerWorks to cart with default options</a> </td> </noscript> </tr> <!--[additional table rows here]--> </table> </div> The developerWorks Ajax resource center Check out the Ajax resource center, your one-stop shop for free tools, code, and information on developing Ajax applications. The active Ajax community forum, hosted by Ajax expert Jack Herrington, connects you with peers who might just have the answers you're looking for right now. You can see the results of all this tinkering by viewing the Customize Me Now 2.0 Search Results page in a browser and launching the Product Details or Comparison pages. It should look like the one in Figure 3. Figure 3. ThickBox in action Retrofit existing sites with Ajax and jQuery Page 14 of 19 © Copyright IBM Corporation 1994, 2007. All rights reserved.
ibm.com/developerWorks developerWorks® Summary While this article covered a great deal of material — showing you some Ajax techniques and best practices -- we're just getting started. In Part 2 of this series, you will continue to refine your navigation by transforming pop-up links into tooltips using JTip. Then, you'll convert off-site links into lightboxes using GreyBox. Finally, you'll review all the key concepts behind the example application and examine how they've improved its user experience. If you want to work ahead, you can dig deeper into the source code for Customize Me Now 2.0 and look at it in action in a Web browser. Retrofit existing sites with Ajax and jQuery © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 15 of 19
developerWorks® ibm.com/developerWorks Share this... Digg this story Post to del.icio.us Slashdot it! Retrofit existing sites with Ajax and jQuery Page 16 of 19 © Copyright IBM Corporation 1994, 2007. All rights reserved.
ibm.com/developerWorks developerWorks® In his 12 years as a Web developer, Brian J. Dillard has built rich user interfaces for companies as diverse as Orbitz Worldwide, Reflect True Custom Beauty, Archipelago LLC, and United Airlines. Now serving as RIA Evangelist at Pathfinder Development in Chicago, Illinois, Brian builds rich Internet applications for a variety of clients, participates in open source projects, and contributes to the Agile Ajax blog. He is the project lead on Really Simple History, an Ajax history and bookmarking library used in the production code of thousands of Web sites. You can reach Brian at email@example.com. Trademarks Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc., in the United States, other countries, or both. Microsoft, Internet Explorer, and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. Retrofit existing sites with Ajax and jQuery © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 19 of 19