• Choose a category
• All
• Classic-Fiction

Multi - Pass Demo

Setting up the HTML framework

As always, the HTML page provides the central skeleton of the page. This site is reasonably simple, because it sets up some empty areas that will be filled in with AJAX requests later:

1. Import jQuery.

The jQuery library makes AJAX really simple, so begin by importing the library. Check out Chapter 2 of this minibook if you need a refresher on importing jQuery. You can also include the jQuery UI modules if you want, but it isn’t necessary for this simple example.

2. Build a simple form.

The page has a form, but this form is designed more for client-side interaction than server-side. Note that the form has a null action. That’s because the form won’t be directly contacting the PHP program. Let AJAX functions do that.

3. Don’t add a button.

Traditional forms almost always have buttons (either standard buttons in client-side coding or submit buttons for server-side). While you can still include buttons, one of the goals of AJAX is to simplify user interaction. The page will update as soon as the user selects a new hero, so you don’t need a button.

4. Create an empty object.

Build an HTML select element that will contain all the hero names, but don’t fill it yet. The hero names should come from the database. Give the select object an id property so that it can be manipulated through the code.

5. Apply an onchange event to the select object.

When the user chooses a new hero, call a JavaScript function to retrieve data about that hero.

6. Build a div for output.

Create a placeholder for the output. Give it an id so that you can refer to it later in code.

Note that multiPass.html will not validate as valid XHTML strict. That’s because the select tag is empty. That error is really not a problem, because you’re going to fill the select element with data through AJAX calls. Validators are really meant to read standard HTML/XHTML code. They check the code directly as it comes off the server, without running any JavaScript or PHP. The original code is invalid because it has an empty select tag, but as soon as the AJAX runs, the select tag will have data in it, and will be valid. The validator isn’t smart enough to check the second pass, but it is correct.

At this point, you’re doing some work that’s a little more sophisticated than the validator was expecting, so it’s okay that you got an error. As with spelling and grammar checkers, advanced users take the validator as a guideline and know that it’s occasionally acceptable to ignore warnings.

Loading the select element

The first task is to load the select element from the database. This should be done as soon as the page is loaded, so the code will go in a standard init() function:

1. Write an initialization function.

Use the standard jQuery technique for this. I just use the $(init) paradigm because I think it’s easiest.

2. Build a jQuery node based on the select object.

Use jQuery selection techniques to build a jQuery node.

3. Invoke the jQuery load() method.

This method allows you to specify a server-side

Return Main Page Previous Page Next Page

®Online Book Reader