XML Beginner for Client-side server


R

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>
<xsl:eek:therwise>
<p>Book Information not yet specified.</p>
</xsl:eek:therwise>
</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>
 
Ad

Advertisements

O

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>
<xsl:eek:therwise>
<p>Book Information not yet specified.</p>
</xsl:eek:therwise>
</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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top