XML DOM with JScript --- PLEASE HELP!!!

bebe · September 28th, 2003, 07:50 PM

Hi All ... I have a .htm file called bookClient.htm ... Please copy and paste the following code and run it. My problem is that ... when user enter value into the text boxes and click on the submit button. It suppose to print the entered value on the bottom of the form in html, but it doesn't do anything. I have no idea why ... please help.

<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"></td>
        </tr>
        <tr>
            <td>Publisher:</td><td><input id="txtPublisher"></td>
        </tr>
        <tr>
            <td>Published Date:</td><td><input id="txtPubDate"></td>
        </tr>
        <tr>
            <td>Abstract:</td><td><input id="txtAbstract"></td>
        </tr>
        <tr>
            <td>Pages:</td><td><input id="txtPages"></td>
        </tr>
        <tr>
            <td>ISBN:</td><td><input id="txtISBN"></td>
        </tr>
        <tr>
            <td>Price:</td><td><input id="txtPrice"></td>
        </tr>
    </table>
    <input id="btnUpdate" type="button" value="Update book info" onclick="updateBookInfo()">
    <h3>Authors:</h3>
    <table>
        <tr>
            <td>Author:</td><td><input id="txtAuthor"></td>
        </tr>
    </table>
    <input id="btnAddAuthor" type="button" value="Add author" onclick="addAuthor()">

    <h3>Categories:</h3>
    <table>
        <tr>
            <td>Category:</td><td><input id="txtCategory"></td>
        </tr>
    </table>
    <input id="btnAddCategory" type="button" value="Add Category" onclick="addCategory()">
    <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(elementRecSubj Categories);
        }
        else
        {
            elementRecSubjCategories = nodelistRecSubjCategories.item(0);
        }
        elementRecSubjCategories.appendChild(elementCatego ry);
        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:otherwise>
                    <p>Book Information not yet specified.</p>
                </xsl:otherwise>
            </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>
            <tr>
                <td>You entered:</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">
         <table border="0" cellpadding="1">
            <tr>
                <td><strong>Categories</strong></td>
            </tr>
            <tr>
                <td>You entered:</td>
            </tr>
            <xsl:for-each select="/book/recSubjCategories/category">
                <tr>
                    <td><xsl:value-of select="text()"/></td>
                </tr>
            </xsl:for-each>
        </table>
         </div>
    </xml>

    <h2>Book information</h2>
    <p><div id="bookInfo"></div></p>
    <p><div id="authorTable"></div></p>
    <p><div id="categoryTable"></div></p>
    The text expression of the current contents of the DOM tree is:
    <pre><div id="divRawXML"></div></pre>
</body>
</head>
</html>

joefawcett · September 30th, 2003, 10:35 AM

There are a number of points:
1) Remember that XPath is case sensitive, you have "Book/Title" and "book/title", these must match your blank xml.
2) You are using an older form of XPath wheeled out by Microsoft before the current standards were finalised. I think the first test should be written:

Code:

<xsl:when test="/book/Title[. != '']">

This extracts all the book/Title nodes where the Title's text is not blank and gives Boolean negative if the set is empty. Assuming you are always only going to have one book element then this works.
3) You are using a stylesheet format that is rarely used and I'm not sure IE can recognise. You're safer putting in the full tags:

Code:

<xml id="bookXSL"><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output omit-xml-declaration="yes"/>
        <xsl:template match="/">
        <div>
            <xsl:choose>
                <xsl:when test="/book/Title[. != '']">
                    <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:otherwise>
                    <p>Book Information not yet specified.</p>
                </xsl:otherwise>
            </xsl:choose>
        </div>

        </xsl:template>
        </xsl:stylesheet>

Again check the capitalisation.
4)When asked for a DomDocument IE gives the latest version upto version 2.6 or version 3 if installed in replace mode. See MSDN for more details if you wish. If you are sure that parser version 3 is available you are better off creating your own parser when needed:

Code:

var oStyle = new ActiveXObject("Msxml2.DomDocument.3.0");
oStyle.async = false;
oStyle.setProperty("SelectionLanguage", "XPath");
oStyle.load(xslBook.XMLDocument);

If you know version 4 is available then use that:

Code:

var oStyle = new ActiveXObject("Msxml2.DomDocument.4.0");
oStyle.async = false;
oStyle.load(xslBook.XMLDocument);

It doesn't need the other line as it doesn't support XSLPattern.
I usually use a function to return a new DomDocument when needed.

--

Joe

joefawcett · September 30th, 2003, 12:24 PM

I forgot one other thing, shouldn't these lines in addAuthor and addcategory create text nodes?

Code:

elementAuthor = docBook.createElement("Author");
textAuthor = docBook.createElement(txtAuthor.value);

Code:

elementAuthor = docBook.createElement("Author");
textAuthor = docBook.createTextNode(txtAuthor.value);

Otherwise you can't have an author with spaces in the name etc?

--

Joe

bebe · September 30th, 2003, 02:03 PM

Thanks Joe ... I changed it already :)

bebe · October 1st, 2003, 11:40 AM

Hi Joe, it's all work now :))))))) Thank you very much for your time :) I really appreciate taht.