Implementing the AJAX Grid Using Client-Side XSLT

In this case study, you will build an AJAX-enabled editable data grid. The products used to populate the grid were kindly provided to us by http://www.the-joke-shop.com/.

Figure 8.1 shows the second page of products and Figure 8.2 shows how the grid looks after the Edit link is clicked, and one of the products enters edit mode.

Figure 8.1: AJAX Grid in Action

Figure 8.2: AJAX Grid in Edit Mode

Because there’s a lot of dynamically output data to generate, this is a good opportunity to learn about XSLT.

Let’s first write the code so you’ll have a working solution, and then we will comment upon it. The program will be composed of the following files:

• grid.php

• grid.class.php

• error_handler.php

• config.php

• grid.css

• index.html

• grid.xsl

• grid.js

Time for Action—AJAX Grid

1. Let’s start by preparing the database for this exercise. We basically need a table with products. You can either execute the SQL script product.sql from the code download, or you...