XML Beginner for Client-side server

Discussion in 'XML' started by Renee, Sep 30, 2003.

  1. Renee

    Renee Guest

    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>
    Renee, Sep 30, 2003
    #1
    1. Advertising

  2. Renee

    Oleg Dulin Guest

    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


    Renee wrote:
    > 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>
    Oleg Dulin, Oct 6, 2003
    #2
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?YWRvbGYgZ2FybGlj?=

    How to access client side XML data island from server side?

    =?Utf-8?B?YWRvbGYgZ2FybGlj?=, Nov 23, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    1,160
    aa7im
    Nov 23, 2004
  2. Replies:
    0
    Views:
    433
  3. Replies:
    1
    Views:
    6,274
  4. Boss302
    Replies:
    0
    Views:
    1,034
    Boss302
    Nov 21, 2006
  5. Replies:
    0
    Views:
    160
Loading...

Share This Page