AJAX
Updating the HTML DOM
27-Jan-2009 09:46:46
The parseMessages() function handles the incoming XML data. In doing so, it relies on several ancillary functions, such as appendComposer(), getElementY(), and clearTable(). You must also introduce new elements to the index page, such as a second HTML table which serves as the auto-complete box, and ID's for elements so they can be referenced in javascript.js. Finally, you create new variables corresponding to ID's for elements in index.php, initialize them in the init() function that you previously implemented, and add some functionality that is needed each time index.php is loaded.
Note: The functions and elements that you create in the following steps work interdependently. It is recommended that you work through this section, then examine the code once it is all in place.
- Open
index.phpin the editor and type in the below code for the second row of the HTML table you previously created.<tr>
The second row of the table contains another HTML table. This table represents the auto-complete box that will be used to populate composer names.
<td id="auto-row" colspan="2">
<table id="complete-table" />
<td/>
</tr> - Open
javascript.jsin the editor and the following three variables to the top of the file.var completeField;
var completeTable;
var autoRow; - Add the following lines (in bold) to the
init()function.function init() {One purpose of
completeField = document.getElementById("complete-field");
completeTable = document.getElementById("complete-table");
autoRow = document.getElementById("auto-row");
completeTable.style.top = getElementY(autoRow) + "px";
clearTable();
}init()is to make elements insideindex.phpaccessible to other functions that will modify the index page's DOM. - Add
appendComposer()tojavascript.js.function appendComposer(firstName,lastName,composerId) {This function creates a new table row, inserts a link to a composer into it using the data passed to the function via its three parameters, and inserts the row into the index page's
var row;
var cell;
var linkElement;
if (isIE) {
completeTable.style.display = 'block';
row = completeTable.insertRow(completeTable.rows.length);
cell = row.insertCell(0);
} else {
completeTable.style.display = 'table';
row = document.createElement("tr");
cell = document.createElement("td");
row.appendChild(cell);
completeTable.appendChild(row);
}
cell.className = "popupCell";
linkElement = document.createElement("a");
linkElement.className = "popupItem";
linkElement.setAttribute("href", "autocomplete.php?action=lookup&id=" + composerId);
linkElement.appendChild(document.createTextNode(firstName + " " + lastName));
cell.appendChild(linkElement);
}complete-tableelement. - Add
clearTable()tojavascript.js.function clearTable() {This function sets the display of the
if (completeTable) {
completeTable.style.display = 'none';
for (loop = completeTable.childNodes.length -1; loop >= 0 ; loop--) {
completeTable.removeChild(completeTable.childNodes[loop]);
}
}
}complete-tableelement to 'none', (i.e., makes it invisible), and it removes any existing composer name entries that were created. Note that this function is called ininit()in order to set the table as invisible by default. - Add
getElementY()tojavascript.js.function getElementY(element){This function is applied to find the vertical position of the parent element. This is necessary because the actual position of the element, when it is displayed, is often dependent on browser type and version. Note that the
var targetTop = 0;
if (element.offsetParent) {
while (element.offsetParent) {
targetTop += element.offsetTop;
element = element.offsetParent;
}
} else if (element.y) {
targetTop += element.y;
}
return targetTop;
}complete-tableelement, when displayed containing composer names, is shifted to the lower right of the table in which it exists. The correct height positioning is determined bygetElementY(). - Modify the
doCompletion()function so that any composer entries that display in the auto-complete box are removed if the text field is empty (changes in bold).function doCompletion() {
if (completeField.value == "") {
clearTable();
} else {
var url = "autocomplete.php?action=complete&id=" + escape(completeField.value);
req = initRequest(url);
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
} - Add
parseMessages()tojavascript.js.function parseMessages(responseXML) {
clearTable();
var composers = responseXML.getElementsByTagName("composers")[0];
if (composers.childNodes.length > 0) {
completeTable.setAttribute("bordercolor", "black");
completeTable.setAttribute("border", "1");
} else {
clearTable();
}
for (loop = 0; loop < composers.childNodes.length; loop++) {
var composer = composers.childNodes[loop];
var firstName = composer.getElementsByTagName("firstName")[0];
var lastName = composer.getElementsByTagName("lastName")[0];
var composerId = composer.getElementsByTagName("id")[0];
appendComposer(firstName.childNodes[0].nodeValue,
lastName.childNodes[0].nodeValue,
composerId.childNodes[0].nodeValue);
}
}
The parseMessages() function receives as a parameter an object representation of the XML document returned by the autocomplete.php file. The function programmatically traverses the XML document, extracting the firstName, lastName, and id of each entry, then passes this data to appendComposer(). This results in a dynamic update to the contents of the complete-table element. For example, an entry that is generated and inserted into complete-table might look as follows:
<tr>
<td class="popupCell">
<a class="popupItem" href="autocomplete?action=lookup&id=12">Antonin Dvorak</a>
</td>
</tr>
The dynamic update to the complete-table element represents the final step of the process flow of communication that takes place during communication using Ajax.
| Reply Comment | ||||
|
||||
| |
||||
Index : AJAX