Filtering and Displaying Data Using Ajax
- What You Will Learn
- Defining a Static Site
- Passing and Using Data with Ajax
- Connecting the Country Profiles Page to HTML Data
- Styling the Spry Table
- Creating Spry Regions
- Displaying with a Spry Accordion
- Adding Images and the Country Name
- Refining Page Display Using CSS Styling and Positioning
- What You Have Learned
- Additional Spry Functionality in Dreamweaver CS4
- Additional Resources
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
This document is an update to Chapter 9 of Adobe Dreamweaver CS3 with ASP, ColdFusion, and PHP: Training from the Source from Adobe Press. It has been updated to accommodate the changes in the Spry functionality in Dreamweaver CS4.
One of the many benefits of using databases is that they are scalable. At the moment, the Newland Tours sample database in the exercise files for this article contains profiles for 16 countries. However, over time the business could grow to contain profiles of 40, 60, or more countries. But even at 16, the complete listing of country profiles on a single web page is too much for most users to wade through. Users of a travel site aren't usually interested in all the countries in a database, but rather a subset—the ones they're considering visiting. The same rule applies to the tour descriptions, and even more broadly to most database data on the Web. Imagine using Amazon.com if you had to download and display millions of products on a single page!
For this reason, it's important when developing dynamic websites to make it easy to filter data, so that users can find the data that they want to see. You can enable your site's visitors to filter data in many different ways, from simple URL parameters to providing full-blown search engines.
In this lesson, you'll learn how to use a technology called Ajax to create a richer, more engaging experience for your site's users. The users will be able to see the detailed profiles of the chosen countries without moving to another page or reloading the current page, making the user experience seem faster and the page seem more responsive.
There are many ways to create Ajax functionality. Adobe has designed an easy-to-use Ajax library called Adobe Spry, which we'll use to create our Ajax functionality. In Dreamweaver CS3, Adobe built in Spry functionality and included a number of user interface elements. In Dreamweaver CS4, Adobe expanded the Spry functionality, providing more options for pulling in data and a few very useful tools for developing with Spry.
In this exercise, you'll build a list of country names that will link to their individual profiles (see Figure 1). The profile of each country is pulled from an XML structure dynamically built from the database and formatted on the fly using Adobe Spry and CSS. The advantage to this approach is that once you've built the application, maintaining it is as simple as updating the data itself—no need to revise the web pages if a country is added, removed, or renamed (yes, that sometimes happens).
)
What You Will Learn
In this lesson, you will do the following:
- Set up a site in Dreamweaver
- Learn about an alternative for passing data to web pages
- Use Adobe Spry to create an application that filters and displays database data
- Create dynamic Spry data regions
- Display images dynamically
- Lay out multiple elements populated with dynamic data and style them with custom CSS