TopXML JavaScript library : Small XML/XSL application with JavaScript

Home Page

Add/Edit your code items

Search the code library

Browse for the code library

JavaScript
JavaScript
JavaScript Contents
Table Column sorting using XML, XSL and JavaScript
Display of Hierarchical Data Islands
x++ beta 0.2 release (includes ISAPI filter/interpreter)
HTTP File Commander
XML Ticker
Fading Ticker
How to understand the flow of control in XLST
Begginers, search the Bible
JavaScript Ticker (using Tabular Data Control)
-postfix.aspx>Infix <> Postfix
Nested Tables And Data Island
XML Data Traversal
TrimWhiteSpace
Two Tier Data Islands with Expanding/Collapsing Child elements.
Escape special characters using JavaScript and regular expressions
Sticky Table Headers
Dynamically Filling HTML Select Box from XML Data Island using Javascript.
XML Basics Handbook

LAMP >>

By	Mark Wilson I am the creator of TopXML. I am available for international and local (Australia) contracts. I am a Solution Architect/Business Analyst. I have worked in IT in several countries (NZ, Australia, South Africa, UK) building and training teams for government and very large non-governmental organizations. I am ex-Microsoft Consulting Services. I wrote the first book on Microsoft XML published in 2000 called XML Programming with VB and ASP. Most recently I have been building tools for the SEO industry. Ask me for a 37 point SEO health-checkup for your website.
First Posted	05/05/2002
Times viewed	553

Small XML/XSL application with JavaScript

This post contains attachments
v20020505194226.zip

Summary This article gives an idea on how XML/XSL application can be developed by using JavaScript with XSLT elements.

When we load the XsltTOC.xml document, it displays the list of XSLT tags. In this XML document, the stylesheet XsltTOC.xsl is being embedded/invoked to test the application. When we click one of the element links, it displays the element with little explanation of what that element does. Even we have Back To Contents link which will display list of XSLT tags. The application coding gives an idea how to embed html code in the XSLT tags, how to invoke the javascript functions, how and when to use the different XSLT tags and XSLT functions.

Additional information
XSL Code ____________________________________________ <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSLT Expertise</title> <style> .subheading{color:blue; font-size:22px; font-family:Arial; background-color:gray} .clsData{color:black; font-size:16px; font-family:Arial; cursor:hand;} .clsClickData{color:black; font-size:16px; font-family:Arial; cursor:hand;} .clsDisplayNone{display:none} .clsDisplayInline{display:inline} .hr{color:gray} </style> <script language="JavaScript"> <![CDATA[ var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; function xsltElementClick(oThis) { tdXsltElement.innerText = oThis.parentNode.cells(2).innerText; var sID = oThis.parentNode.cells(0).innerText; var bLoad = xmlDoc.load("XsltTOC.xml"); var sString=""; if (bLoad) { var sQuery = 'Content/XsltElements/Element[@id=' + sID + '~'; oElementNode = xmlDoc.selectSingleNode(sQuery); if (oElementNode.hasChildNodes) { oElementName = oElementNode.childNodes.item(0); oElementHowTo = oElementName.nextSibling; tdXsltElement.innerText = oElementName.text; tdXsltHow.innerText = oElementHowTo.text; } oElementName = oElementNode; divContents.className = "clsDisplayNone"; divXsltElementClick.className = "clsDisplayInline"; } else { alert("Loading failed"); } } function body_onLoad() { divXsltElementClick.className = "clsDisplayNone"; } function showTOC() { divXsltElementClick.className = "clsDisplayNone"; divContents.className = "clsDisplayInline"; } ~~> </script> </head> <body onLoad="body_onLoad()"> <xsl:element name="myElement"> <xsl:attribute name="myAttr"></xsl:attribute> </xsl:element> <div id="divContents"> <table cellpadding="0" cellspacing="0" width="500px"> <tr> <td><span class="subheading">Elements:</span><span id="spanEleSelect"></span></td> </tr> <tr> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <xsl:variable name="EleCount" select="count(Content/XsltElements/Element/Name)"></xsl:variable> <td valign="top"> <table> <xsl:for-each select="Content/XsltElements/Element/Name[parent::*/@id <= ceiling($EleCount div 2)~"> <tr> <td class="clsData" style="color:red;"> <xsl:value-of select='format-number(parent::*/@id,"00")'/> </td> <td style="width:10px"></td> <td class="clsClickData" onClick="xsltElementClick(this);"> <xsl:value-of select="."/> </td> </tr> </xsl:for-each> </table> </td> <td style="width:100px"></td> <td valign="top"> <table> <xsl:for-each select="Content/XsltElements/Element/Name[parent::*/@id > ceiling($EleCount div 2)~"> <tr> <td class="clsData" style="color:red;"> <xsl:value-of select='format-number(parent::*/@id,"00")'/> </td> <td style="width:10px"></td> <td class="clsClickData" onClick="xsltElementClick(this);"> <xsl:value-of select="."/> </td> </tr> </xsl:for-each> </table> </td> </tr> </table> </td> </tr> </table> </div> <div id="divXsltElementClick"> <table cellpadding="0" cellspacing="0" width="500px"> <tr> <td align="right"> <span id="spanBack" class="clsClickData" onClick="showTOC()"><font color="blue">Back to Contents</font></span> <hr/> </td> </tr> <tr> <td id="tdXsltElement" style="text-decoration:underline;"></td> </tr> <tr> <td style="height:20px"></td> </tr> <tr> <td id="tdXsltHow"></td> </tr> </table> </div> </body> </html> </xsl:template> </xsl:stylesheet>

Further additional information
<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="XsltTOC.xsl"?> <Content> <XsltElements> <Element id="1"> <Name>xsl:apply-imports</Name> <HowTo>This element is used to invoke definitions and template rules of an imported stylesheet by will be overridden by imported sytlesheet.</HowTo> </Element> <Element id="2"> <Name>xsl:apply-template</Name> <HowTo>This element causes the formatting engine to process the child nodes of the root node of the input document.</HowTo> </Element> <Element id="3"> <Name>xsl:attribute</Name> <HowTo>This element calculates an attribute name and value and inserts it into the output.</HowTo> </Element> <Element id="4"> <Name>xsl:attribute-set</Name> <HowTo>This element is used to define one or more attributes as members of an attribute. This will be set at the top level of the stylesheet.</HowTo> </Element> <Element id="5"> <Name>xsl:call-template</Name> <HowTo>This element is used to call a template by name.</HowTo> </Element> <Element id="6"> <Name>xsl:choose</Name> <HowTo>This element places the template of the first one of its xsl:when children whose test attribute will be true, or the template of its xsl:otherwsie element if no xsl:when element has true test attribute.</HowTo> </Element> <Element id="7"> <Name>xsl:comment</Name> <HowTo>This element places a comment in the output document.</HowTo> </Element> <Element id="8"> <Name>xsl:copy</Name> <HowTo>This element places the source node into the output document tree.</HowTo> </Element> <Element id="9"> <Name>xsl:decimal-format</Name> <HowTo>This element defines the characters and symbols where the format-number function uses it to convert numbers to strings.</HowTo> </Element> <Element id="10"> <Name>xsl:element</Name> <HowTo>This element places an element into the output document.</HowTo> </Element> <Element id="11"> <Name>xsl:fallback</Name> <HowTo>This element is designed to provide fallback code where it can be run as alternative if XSLT processor fails to support.</HowTo> </Element> <Element id="12"> <Name>xsl:for-each</Name> <HowTo>This element processes each element chosen by its select attribute in turn.</HowTo> </Element> <Element id="13"> <Name>xsl:if</Name> <HowTo>This element gives a logical option for changing the output based on a pattern.</HowTo> </Element> <Element id="14"> <Name>xsl:import</Name> <HowTo>This element is a top-level element whose href attribute provides thr URI of a style sheet to import.</HowTo> </Element> <Element id="15"> <Name>xsl:include</Name> <HowTo>This element is a top-level element that copies another style sheet into the current style sheet at the point where it occurs.</HowTo> </Element> <Element id="16"> <Name>xsl:key</Name> <HowTo>This element is used to declare a named key where it can be used by key function</HowTo> </Element> <Element id="17"> <Name>xsl:message</Name> <HowTo>This element is used to give message by displaying text message in the output document.</HowTo> </Element> <Element id="18"> <Name>xsl:namespace-alias</Name> <HowTo>This element is used in a stylesheet to replace the current namespace prefix with the different namespace prefiex.</HowTo> </Element> <Element id="19"> <Name>xsl:number</Name> <HowTo>This element inserts a formatted integer into the output document.</HowTo> </Element> <Element id="20"> <Name>xsl:otherwise</Name> <HowTo>This element is the child of the xsl:choose element.</HowTo> </Element> <Element id="21"> <Name>xsl:output</Name> <HowTo>This element indicates the type of the output document format, XML declaration, document type declaration, indentation, encodint and MIME type.</HowTo> </Element> <Element id="22"> <Name>xsl:param</Name> <HowTo>This element is used to declare a local or global parameter and to give that parameter a name and default value.</HowTo> </Element> <Element id="23"> <Name>xsl:preserve-space</Name> <HowTo>This element preservs white-space nodes in the input document.</HowTo> </Element> <Element id="24"> <Name>xsl:stylesheet</Name> <HowTo>This element is used to include an XSLT stylesheet in the XML document. This must be placed as the child of the document element, rather than a root element itself.</HowTo> </Element> <Element id="25"> <Name>xsl:processing-instruction</Name> <HowTo>This element places a processing instruction in the output document.</HowTo> </Element> <Element id="26"> <Name>xsl:sort</Name> <HowTo>This element sorts the output elements into a different order than they appear in the output.</HowTo> </Element> <Element id="27"> <Name>xsl:strip-space</Name> <HowTo>This element deletes white-space only nodes in the input document.</HowTo> </Element> <Element id="28"> <Name>xsl:template</Name> <HowTo>This element is used to define a template that can be applied to a node to produce the expected output. We can reuse common template code by giving name attribute. The match attribute is a match pattern specifying which nodes the template matches.</HowTo> </Element> <Element id="29"> <Name>xsl:text</Name> <HowTo>This element inserts its contents into the output document as literal text.</HowTo> </Element> <Element id="30"> <Name>xsl:transform</Name> <HowTo>This element contains all the XSLT related elements and delimits the start and stop of .xsl program code.</HowTo> </Element> <Element id="31"> <Name>xsl:value-of</Name> <HowTo>This element evaluates the value of something and places it into the output document.</HowTo> </Element> <Element id="32"> <Name>xsl:variable</Name> <HowTo>This element defines a named string to use in the stylesheet via an attribute value template.</HowTo> </Element> <Element id="33"> <Name>xsl:when</Name> <HowTo>This element is the child of the xsl:choose element. It makes a choice when there are more than two possible options.</HowTo> </Element> <Element id="34"> <Name>xsl:with-param</Name> <HowTo>This element is used to set a local or global parameter by assigning a name using xsl:templates and xsl:call-template elements.</HowTo> </Element> </XsltElements> <XsltFunctions> </XsltFunctions> <XPathFunctions> </XPathFunctions> </Content>

Rate this article on a scale of 1 to 10 (1 votes, average 1)

Your vote :

LAMP >>


Leave a comment for this article
Your name
Your email (optional)
Your comment
Optional: Upload an attachment
Enter the code shown:



	Recent Jobs An immediate job opportunity as a Biztal Software Developers Needed in Charlotte, Sr. Software Engineer - Analytics Immediate Mainframe openings for Chennai Immediate TANDEM-TAL openings for Chenna View all Jobs (Add yours) View all CV (Add yours)

	answering service it help desk swimming pool contractor international conference call water softener Teleconference Host Department NOLIMIT Web Hosting MSN sunglasses

	Partners Dream.In.Code dotNet Slackers dotNet Spider Your HTML Source VisualBuilder.com DevGuru Planet Source Code ZVON.ORG Web Design ASPAlliance XML Pitstop Scripts The Spot 4 SAP Bitshop Web Hosting

Email TopXML