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>
 
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>
Click to expand...
 

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

Similar Threads

Bootstrap contact form not working 2
Sort by number of characters 1
Javascript DOM 1
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
Help needed with thank you message 5
Filter table rows based on multiple checkboxes value 2
Only one table shows up with the information 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

Total: 324 (members: 2, guests: 322)
Robots: 350

Forum statistics

Threads
474,262
Messages
2,571,048
Members
48,769
Latest member
Clifft

Latest Threads

Top