[xsl] transformNode() and innerHTML combo fail to update browser

Subject: [xsl] transformNode() and innerHTML combo fail to update browser
From: "Dale Gillard" <dalegillard@xxxxxxxxxxx>
Date: Mon, 22 Dec 2003 16:01:13 +1000
Hello

Please be kind - this is my first post. I have created a HTML page
containing a XML/XSLT document that sorts a list of staff. This works
fine until I use Javascript to change the xsl:sort select attribute. The
transformNode generates the new HTML but it is not inserted into the web
page via the innerHTML method. I suspect the transformNode method is not
generating valid HTML and the browser is therefore failing to update the
web page, knowing it will fail. However, I'd appreciate your expert
comments before resorting to a workaround (ie creating separate XSLT
files for each sort my users may want to do).

The organisation I work for limits our staff to using MS IE 5.5. Chris
Bayes web page tells me I'm using MSXML2 v3.0 in Replace mode.

Cut down versions of the .xml, .xsl and .js files I'm using appear below.
My apologies for the length of this post.

These files show an XSL document that styles the XML document to be a 4
column HTML table. This combination displays and sorts as expected. But
clicking two of the column headings invokes a "sortWithValue()"
javascript method from a linked "xsl.js" file. By adding alert()s to
various points in this script I can see it correctly finds the @select
attribute, changes it, and transforms the XML document using the XSL
file. However, the HTML the XSL file generates via transformNode() seems
to be missing tags like a starting <td> tag. And the generated HTML does
not appear in the <div> as I'd expect.

Thanks in advance for your help.

Dale Gillard
----------------
file listing - aro.xml 
----------------
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="aro.xsl"?> 
<arolist>
<aro>
  <name> <first>Dale</first> <last>Gillard</last> </name>
  <phBookURL>/phone/display_data.cfm?Id=1000000300</phBookURL>
  <area>Pacific Central</area>
  <areaGroup></areaGroup>
  <location>Coffs Harbour</location>
  <offices>
    <office> <name>Area North Australia</name> <code></code> </office>
  </offices>
</aro>
----------------

----------------
file listing - xsl.js
----------------
function sortWithValue(aSortValue) 
{ 
  theXMLDoc = document.XMLDocument;
  theXSLDoc = document.XSLDocument;
  var node = theXSLDoc.selectSingleNode( "//xsl:sort/@select" );
  node.nodeValue = aSortValue;
  var html = theXMLDoc.documentElement.transformNode(theXSLDoc)
  // The following line fails to update the document, 
  // even though alert() methods show transformNode() returned the
  expected HTML.
  aroListing.innerHTML = html;
}
----------------

----------------
file listing - aro.xsl
----------------
<?xml version="1.0"?> 
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform";>
<xsl:output method="html" />
<xsl:template match="/">
<html>
<head>
<title>ARONET - ARO Contacts</title>
<link rel="stylesheet" href="/stylesheets/corp.css" />
<script type="text/javascript" src="/stylesheets/keystroke.js"></script>
<!-- The externally linked Javascript file used to change the XSLT
sort/@select attribute. -->
<script type="text/javascript" src="../javascript/xsl.js"></script>
</head>
<body>
<table summary="Page Body" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tr> 
<td valign="top"><a name="body"></a>
<h1 title="Authorised Review Officer Contacts">ARO Contacts</h1>
<table width="95%" border="0" align="center" cellpadding="5"
cellspacing="0">
<tr>
<td class="euc40">
<div id="areaCell" style="cursor:hand" onClick="sortWithValue('area')">
  <strong>Area</strong>
</div>
</td>
<td class="euc40">
<div id="nameCell" style="cursor:hand"
onClick="sortWithValue('name/last')">
  <strong>Name</strong>
</div>
</td>
<td class="euc40"><strong>Location</strong></td>
<td class="euc40"><strong>Does reviews for</strong></td>
</tr>
<!-- The following div is referenced by the Javascript. -->
<div id="aroListing">
  <xsl:apply-templates />
</div>
</table>
</body>
</html>
</xsl:template>
---------------
<xsl:template match="arolist">
  <xsl:apply-templates select="aro">
    <xsl:sort select="area" order="ascending"/>
  </xsl:apply-templates>
</xsl:template>

<xsl:template match="aro">
<tr>
  <xsl:apply-templates select="area"/>
  <xsl:apply-templates select="name"/>
  <td valign="top" class="euc20" style="white-space:nowrap"><xsl:value-of
  select="location"/></td>
  <xsl:apply-templates select="offices"/>
</tr>
</xsl:template>

<xsl:template match="area">
  <td valign="top" class="euc20" style="white-space:nowrap">
  <xsl:value-of select="."/><br />
  <xsl:apply-templates select="../areaGroup"/>
  </td>
</xsl:template>

<xsl:template match="areaGroup">
  <div style="font:0.75em;color:gray" title="Area Group or Cluster.">
  <xsl:value-of select="."/>
</div>
</xsl:template>

<xsl:template match="name">
  <td valign="top" class="euc20" style="white-space:nowrap">
  <a title="Link to Centrelink Phone Book entry.">
  <xsl:attribute name="href">
    <xsl:value-of select="../phBookURL"/>
  </xsl:attribute>
  <xsl:value-of select="."/>
  </a>
  </td>
</xsl:template>

<xsl:template match="offices">
  <td valign="top" class="euc20">
  <xsl:for-each select="office">
    <xsl:sort select="name" order="ascending"/>
    <xsl:value-of select="name"/>
    <xsl:if test="string(code)">
      (<xsl:value-of select="code"/>)<br/>
    </xsl:if>
  </xsl:for-each>
  </td>
</xsl:template>

</xsl:stylesheet>
----------------
-- 
  Dale Gillard
  dalegillard@xxxxxxxxxxx

-- 
http://www.fastmail.fm - Consolidate POP email and Hotmail in one place

 XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list


Current Thread