• Choose a category
• All
• Classic-Fiction

By Root 3933 0

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.2 Initiating 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.

Licensed to jonathan zheng

The client-side code

475

Listing 12.2 Initiation function

function GrabNumber(){

Create the function

var urlXML='PhoneXML.php?q='

+ document.Form1.user.value; b

Build XML URL

var urlXSL='Phone.xsl'; c

Build XSL URL

var newImg=document.createElement('img'); d

Create image element

newImg.setAttribute('src',

'images/loading.gif'); e

Set the source

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 d is created and the source attribute e of 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 Licensed to jonathan zheng

476

CHAPTER 12

Live search using XSLT

parameter instead of hard-coding the value into our LoadXMLXSLTDoc() function, we can reuse this function multiple times on the same page without having to add multiple functions or if statements to separate the functionality. Therefore, we redirect the output of different searches to different parts of the page. But before we do this, let’s look at how we build the XML and XSLT documents on