XML Beginner for Client-side server

[Renee]

I am doing a simple client-side example using DOM in JScript. When the user enter info and click on the submit button, it will then print the value at the bottom of the page. However, I don't know what's wrong that the entered values are not printed out. Can anyone please help me??? Any reply is appreciated. My code is as follow, you can copy and run it yourself.

File name: bookClient.htm

<html>
<head>
<title>Wrox Press book data entry page</title>
<body onload="initializeBook" >
<h1>Wrox Press book data entry page</h1>
<h3>Book information:</h3>
<table>
<tr>
<td>Title:</td>
<td><input id="txtTitle"></input></td>
</tr>
<tr>
<td>Publisher:</td><td><input id="txtPublisher"></input></td> </tr> <tr> <td>Published Date:</td><td><input id="txtPubDate"></input></td> </tr> <tr> <td>Abstract:</td><td><input id="txtAbstract"></input></td> </tr> <tr> <td>Pages:</td><td><input id="txtPages"></input></td> </tr> <tr> <td>ISBN:</td><td><input id="txtISBN"></input></td> </tr> <tr> <td>Price:</td><td><input id="txtPrice"></input></td> </tr> </table> <input id="btnUpdate" type="button" value="Update book info" onclick="updateBookInfo"></input> <h3>Authors:</h3> <table> <tr> <td>Author:</td><td><input id="txtAuthor"></input></td> </tr> </table> <input id="btnAddAuthor" type="button" value="Add author" onclick="addAuthor"></input>

<h3>Categories:</h3>
<table>
<tr>
<td>Category:</td><td><input id="txtCategory"></input></td> </tr> </table> <input id="btnAddCategory" type="button" value="Add Category" onclick="addCategory"></input> <xml id="docBook"> <book> </book> </xml> <script> var docBook; function initializeBook {

docBook = document.all("docBook").XMLDocument;
docBook.async = "false";
renderElements;
}

function createOrReplaceElement(sElementName, sElementValue, elementParent) { var elementItem; var textValue; var nodelistOldItem;

elementItem = docBook.createElement(sElementName);
textValue = docBook.createTextNode(sElementValue);
elementItem.appendChild(textValue);

nodelistOldItem = elementParent.getElementsByTagName(sElementName); if (nodelistOldItem.length > 0) { elementParent.replaceChild(elementItem, nodelistOldItem.item(0)); } else { elementParent.appendChild(elementItem); } } function updateBookInfo { createOrReplaceElement("Title", txtTitle.value, docBook.documentElement); createOrReplaceElement("Publisher", txtPublisher.value, docBook.documentElement); createOrReplaceElement("PubDate", txtPubDate.value, docBook.documentElement); createOrReplaceElement("Abstract", txtAbstract.value, docBook.documentElement); createOrReplaceElement("Pages", txtPages.value, docBook.documentElement); createOrReplaceElement("ISBN", txtISBN.value, docBook.documentElement); createOrReplaceElement("Price", txtPrice.value, docBook.documentElement);

renderElements;
}
function addAuthor
{
var elementAuthor;
var textAuthor;
var nodelistAuthors;
var elementAuthors;
elementAuthor = docBook.createElement("author");
textAuthor = docBook.createElement(txtAuthor.value);
elementAuthor.appendChild(textAuthor);
nodelistAuthors = docBook.getElementsByTagName("authors"); if (nodelistAuthors.length == 0) { elementAuthors = docBook.createElement("authors"); docBook.documentElement.appendChild(elementAuthors); } else { elementAuthors = nodelistAuthors.item(0); } elementAuthors.appendChild(elementAuthor); renderElements; } function addCategory { var elementCategory; var textCategory; var nodelistRecSubjCategories; var elementRecSubjCategories; elementCategory = docBook.createElement("category"); textCategory = docBook.createElement(txtCategory.value); elementCategory.appendChild(textCategory); nodelistRecSubjCategories = docBook.getElementsByTagName("recSubjCategories"); if (nodelistRecSubjCategories.length == 0) { elementRecSubjCategories = docBook.createElement("recSubjCategories"); docBook.documentElement.appendChild(elementRecSubjCategories); } else { elementRecSubjCategories = nodelistRecSubjCategories.item(0); } elementRecSubjCategories.appendChild(elementCategory); renderElements; } function renderElements {

document.all("divRawXML").innerText = docBook.xml;
bookInfo.innerHTML = docBook.transformNode(bookXSL.documentElement); authorTable.innerHTML = docBook.transformNode(authorXSL.documentElement); categoryTable.innerHTML = docBook.transformNode(categoryXSL.documentElement); } </script> <xml id="bookXSL"> <div xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:choose> <xsl:when test="/book/title[. $ne$ '']"> <table border="0" cellpadding="1"> <tr> <td>Title:</td> <td><xsl:value-of select="/book/title"/></td> </tr> <tr> <td>Publisher:</td> <td><xsl:value-of select="/book/publisher"/></td> </tr> <tr> <td>Published Date:</td> <td><xsl:value-of select="/book/pubDate"/></td> </tr> <tr> <td>Abstract:</td> <td><xsl:value-of select="/book/abstract"/></td> </tr> <tr> <td>Pages:</td> <td><xsl:value-of select="/book/pages"/></td> </tr> <tr> <td>ISBN:</td> <td><xsl:value-of select="/book/isbn"/></td> </tr> <tr> <td>Price:</td> <td><xsl:value-of select="/book/price"/></td> </tr> </table> </xsl:when> <xsltherwise> <p>Book Information not yet specified.</p> </xsltherwise> </xsl:choose> </div> </xml> <xml id="authorXSL"> <div xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <table border="0" cellpadding="1"> <tr> <td><strong>Authors</strong></td> </tr> <xsl:for-each select="/book/authors/author"> <tr> <td><xsl:value-of select="text"/></td> </tr> </xsl:for-each> </table> </div> </xml> <xml id="categoryXSL"> <div xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/category"> <table border="0" cellpadding="1"> <tr> <td><strong>Categories</strong></td> </tr> <xsl:for-each select="category"> <tr> <td><xsl:value-of select="category"/></td> </tr> </xsl:for-each> </table> </xsl:template> </div> </xml> <hr> <h2>Book information</h2> <p><div id="bookInfo"></div></p> <p><div id="authorTable"></div></p> <p><div id="categoryTable"></div></p> </hr> The text expression of the current contents of the DOM tree is:
<pre><div id="divRawXML"></div></pre>
</body>
</head>
</html>

 

[Oleg Dulin]

Browsers render HTML as a stream, rather than as a parse tree. Try to put your script at the beginning of the document, rather than at the end.

Regards,
Oleg

I am doing a simple client-side example using DOM in JScript. When the user enter info and click on the submit button, it will then print the value at the bottom of the page. However, I don't know what's wrong that the entered values are not printed out. Can anyone please help me??? Any reply is appreciated. My code is as follow, you can copy and run it yourself.

File name: bookClient.htm

<html>
<head>
<title>Wrox Press book data entry page</title>
<body onload="initializeBook" >
<h1>Wrox Press book data entry page</h1>
<h3>Book information:</h3>
<table>
<tr>
<td>Title:</td>
<td><input id="txtTitle"></input></td>
</tr>
<tr>
<td>Publisher:</td><td><input id="txtPublisher"></input></td> </tr> <tr> <td>Published Date:</td><td><input id="txtPubDate"></input></td> </tr> <tr> <td>Abstract:</td><td><input id="txtAbstract"></input></td> </tr> <tr> <td>Pages:</td><td><input id="txtPages"></input></td> </tr> <tr> <td>ISBN:</td><td><input id="txtISBN"></input></td> </tr> <tr> <td>Price:</td><td><input id="txtPrice"></input></td> </tr> </table> <input id="btnUpdate" type="button" value="Update book info" onclick="updateBookInfo"></input> <h3>Authors:</h3> <table> <tr> <td>Author:</td><td><input id="txtAuthor"></input></td> </tr> </table> <input id="btnAddAuthor" type="button" value="Add author" onclick="addAuthor"></input>

<h3>Categories:</h3>
<table>
<tr>
<td>Category:</td><td><input id="txtCategory"></input></td> </tr> </table> <input id="btnAddCategory" type="button" value="Add Category" onclick="addCategory"></input> <xml id="docBook"> <book> </book> </xml> <script> var docBook; function initializeBook {

docBook = document.all("docBook").XMLDocument;
docBook.async = "false";
renderElements;
}

function createOrReplaceElement(sElementName, sElementValue, elementParent) { var elementItem; var textValue; var nodelistOldItem;

elementItem = docBook.createElement(sElementName);
textValue = docBook.createTextNode(sElementValue);
elementItem.appendChild(textValue);

nodelistOldItem = elementParent.getElementsByTagName(sElementName); if (nodelistOldItem.length > 0) { elementParent.replaceChild(elementItem, nodelistOldItem.item(0)); } else { elementParent.appendChild(elementItem); } } function updateBookInfo { createOrReplaceElement("Title", txtTitle.value, docBook.documentElement); createOrReplaceElement("Publisher", txtPublisher.value, docBook.documentElement); createOrReplaceElement("PubDate", txtPubDate.value, docBook.documentElement); createOrReplaceElement("Abstract", txtAbstract.value, docBook.documentElement); createOrReplaceElement("Pages", txtPages.value, docBook.documentElement); createOrReplaceElement("ISBN", txtISBN.value, docBook.documentElement); createOrReplaceElement("Price", txtPrice.value, docBook.documentElement);

renderElements;
}
function addAuthor
{
var elementAuthor;
var textAuthor;
var nodelistAuthors;
var elementAuthors;
elementAuthor = docBook.createElement("author");
textAuthor = docBook.createElement(txtAuthor.value);
elementAuthor.appendChild(textAuthor);
nodelistAuthors = docBook.getElementsByTagName("authors"); if (nodelistAuthors.length == 0) { elementAuthors = docBook.createElement("authors"); docBook.documentElement.appendChild(elementAuthors); } else { elementAuthors = nodelistAuthors.item(0); } elementAuthors.appendChild(elementAuthor); renderElements; } function addCategory { var elementCategory; var textCategory; var nodelistRecSubjCategories; var elementRecSubjCategories; elementCategory = docBook.createElement("category"); textCategory = docBook.createElement(txtCategory.value); elementCategory.appendChild(textCategory); nodelistRecSubjCategories = docBook.getElementsByTagName("recSubjCategories"); if (nodelistRecSubjCategories.length == 0) { elementRecSubjCategories = docBook.createElement("recSubjCategories"); docBook.documentElement.appendChild(elementRecSubjCategories); } else { elementRecSubjCategories = nodelistRecSubjCategories.item(0); } elementRecSubjCategories.appendChild(elementCategory); renderElements; } function renderElements {

document.all("divRawXML").innerText = docBook.xml;
bookInfo.innerHTML = docBook.transformNode(bookXSL.documentElement); authorTable.innerHTML = docBook.transformNode(authorXSL.documentElement); categoryTable.innerHTML = docBook.transformNode(categoryXSL.documentElement); } </script> <xml id="bookXSL"> <div xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:choose> <xsl:when test="/book/title[. $ne$ '']"> <table border="0" cellpadding="1"> <tr> <td>Title:</td> <td><xsl:value-of select="/book/title"/></td> </tr> <tr> <td>Publisher:</td> <td><xsl:value-of select="/book/publisher"/></td> </tr> <tr> <td>Published Date:</td> <td><xsl:value-of select="/book/pubDate"/></td> </tr> <tr> <td>Abstract:</td> <td><xsl:value-of select="/book/abstract"/></td> </tr> <tr> <td>Pages:</td> <td><xsl:value-of select="/book/pages"/></td> </tr> <tr> <td>ISBN:</td> <td><xsl:value-of select="/book/isbn"/></td> </tr> <tr> <td>Price:</td> <td><xsl:value-of select="/book/price"/></td> </tr> </table> </xsl:when> <xsltherwise> <p>Book Information not yet specified.</p> </xsltherwise> </xsl:choose> </div> </xml> <xml id="authorXSL"> <div xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <table border="0" cellpadding="1"> <tr> <td><strong>Authors</strong></td> </tr> <xsl:for-each select="/book/authors/author"> <tr> <td><xsl:value-of select="text"/></td> </tr> </xsl:for-each> </table> </div> </xml> <xml id="categoryXSL"> <div xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/category"> <table border="0" cellpadding="1"> <tr> <td><strong>Categories</strong></td> </tr> <xsl:for-each select="category"> <tr> <td><xsl:value-of select="category"/></td> </tr> </xsl:for-each> </table> </xsl:template> </div> </xml> <hr> <h2>Book information</h2> <p><div id="bookInfo"></div></p> <p><div id="authorTable"></div></p> <p><div id="categoryTable"></div></p> </hr> The text expression of the current contents of the DOM tree is:
<pre><div id="divRawXML"></div></pre>
</body>
</head>
</html>