The client-side code	473

they see the results. However, with an Ajax search, we need to add a little extra code to make this happen. We will look at this solution in section 12.5.4.

12.2 The client-side code

Formatting XML data using XSLT is a popular technique since XML has a structured layout that can be easily manipulated. In previous projects such as the typeahead suggest in chapter 10, we used JavaScript, XML, and DOM manipulation to create the HTML that we were to display. In this example, we use XSLT to produce the same effect.

XSLT enables us to format our data by building the HTML layout in another file and combining it with the XML document. The XSLT file takes all of the guesswork out of navigating through the XML nodes and building our tables, menus, and HTML layouts. With Ajax, we can retrieve a static or dynamic XML file and a static or dynamic XLST file from the server, and combine them on the client to build our HTML document. XSLT could also be undertaken on the server side, but we’ll look at client-side transformations here.

12.2.1Setting up the client

For this project, we perform a phonebook search on a user’s name. We use one textbox and one submit button to do this. Our simple search form is shown in listing 12.1.

Listing 12.1 Client-side form

<form name="Form1" ID="Form1"	b Add onsubmit handler
onsubmit="GrabNumber();return false;">
Name: <input name="user" type="text"/>	c Insert textbox
<input type="submit" name="btnSearch"

value="Search" /> d Add submit button <br/><br/>

<div id="results"></div> e Add div for results </form>

To initialize the live search, we need to add an event handler to the form tag. The onsubmit event handler bintercepts clicks on both the Enter key on the textbox and the submit button. This event handler calls the function GrabNumber(), which initiates the XMLHttpRequest without submitting the form back to the page. (In a production environment, we would check to see whether the user has JavaScript

474CHAPTER 12

Live search using XSLT

disabled. In that case, the form would have to be submitted back to the server, and we could use a classic search form to support that user. However, we are not adding that functionality to this project.)

The form that we have created is basic, containing only one event handler to initialize the XMLHttpRequest. The textbox c and the submit button d are added to the form to collect the user’s search criteria. If we wanted to get fancy, we could also add an onblur handler to the textbox that calls the function GrabNumber(), and when the user removes focus from the textbox, it would perform the search. In this example, we stick with the onsubmit handler to perform the search.

We next add our div element e to the document as the output location for the search results. We can position the div wherever we want the results to appear on the page. The ID is added to the div so that we can reference it to add the results and an animated GIF. We are not required to use a div element to output the results. We could easily output the results into a cell in a table or even a span; in fact, we can use any HTML element whose innerHTML property can be manipulated. We are using a div because it is a block element, which contains a line break before and after the element. The div also takes up 100 percent of the available width of the browser, making it easier for larger results tables to be displayed to the user.

It is important to note that the onsubmit handler must return false when the event handler is executing. This informs the browser that the form should not be submitted back to the server, which would trigger a full-page refresh and interrupt our JavaScript programming of the form. We’ll see the return value in listing 12.2 in the next section.

12.2.2Initiating the process

In this example, we use two files on the server: an XML document and an XSL document. The XML document is created dynamically by PHP when the client requests it. The PHP code takes the user input posted from the page, runs a query against the database, and then formats the results into an XML document. The static XSL document transforms our dynamic XML file into an HTML document. Because it is static, it does not have to be created by the server at the time of the client request, but can be set up ahead of time.

Just as with the other projects in this book, we are using a function to initialize our XMLHttpRequest object. We gather this information and call the function in listing 12.2.

						The client-side code	475
Listing 12.2 Initiation function
function GrabNumber(){				Create the function
var urlXML='PhoneXML.php?q='					b Build XML URL
+ document.Form1.user.value;
var urlXSL='Phone.xsl';				c Build XSL URL
var newImg=document.createElement('img');						d Create image element
newImg.setAttribute('src',				e Set the source
'images/loading.gif');
document.getElementById("results")
.appendChild(newImg);	f Append image to page
LoadXMLXSLTDoc(urlXML,urlXSL,"results");						g Start loading
}

This function assembles the information needed for the call to the server, sets the “in progress” image, and calls the server, which will dynamically build the response data based on the querystring value we send. The first parameter of the LoadXMLXSLTDoc() function is the URL of the PHP page that generates the XML document, combined with the querystring, which is built by referencing the value of HTML form field b. The second parameter is the name of the XSLT file c that is used in the transformation of the XML data. The third parameter that we need for the function LoadXMLXSLTDoc() is the ID of the div where the search results are to appear. The ID is just the string name of the output element and is not the object’s reference; in this case, the string is “results”.

The next step is to add the loading image to the web page, using DOM methods. The image element dis created and the source attribute eof the image is set. We append the newly created element f to the results div. This places the image file on the page when our function is called from the onsubmit handler of the form. It is important to show the user visual feedback, such as a message or an image, to indicate that the request processing is happening. This eliminates the chance of the user repeatedly clicking the submit button, thinking that nothing has happened, since Ajax is a “silent” process.

The last step is to call the function LoadXMLXSLTDoc() g, which initiates the process of sending the information to the server. The LoadXMLXSLTDoc() function that we will build in section 12.4 will handle calling our ContentLoader(), which requests the documents from the server. By specifying the output location as a