[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 439
  • Last Modified:

Using Javascript to pass parameters from innerHTML to embedded XSL stylesheet

I have a single XHTML file with an embedded XML data island as well as an embedded XSL stylesheet. I am using Javascript to pass sort parameters to the stylesheet.  The sort is working in Netscape -- which is quite amazing -- but in IE I get a "page cannot be displayed" error message.

I am not sure if this is because the page is refreshing or because the sort parameter is not getting picked up from the innerHTML property. I have tried inserting "return false();" at various points in the script, but it did not work.

Here is the XHTML (it has to have an .xhtml extension):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      <head>
            <script language="JavaScript">
//<![CDATA[
var arrSort = new Array();
arrSort["id"] = "ascending";
arrSort["date"] = "ascending";
arrSort["location"] = "ascending";
arrSort["number"] = "ascending";
arrSort["charges"] = "ascending";
arrSort["savings"] = "ascending";
arrSort["amount"] = "ascending";

function sortXML(theLink)
{
var column = "location";
var order = "descending";
if(theLink)
      {
      column = theLink.innerHTML.toLowerCase(); // fix this line
      
      if (arrSort[column] == 'ascending')
            {
            order = 'descending';
            }
      else
            {
            order = 'ascending';
            }
      arrSort[column] = order;
      }    
if (document.implementation && document.implementation.createDocument) // Netscape
      {
      var xslDoc;
      var xsltProcessor = new XSLTProcessor();
      var myDOM;
      var xmlDoc;
      var xslDoc = document.implementation.createDocument("", "", null);
      var myXSLNode = document.getElementById("myXSLStylesheet");
      var clonedXSLNode = xslDoc.importNode(myXSLNode.childNodes.item(1), true);
      xslDoc.appendChild(clonedXSLNode);      
      xsltProcessor.importStylesheet(xslDoc);      
      var xmlDoc = document.implementation.createDocument("", "", null);
      var myNode = document.getElementById("myXMLData");
      var clonedNode = xmlDoc.importNode(myNode.childNodes.item(1), true);
      xmlDoc.appendChild(clonedNode);
      xsltProcessor.setParameter(null, "sortKey", column);
      xsltProcessor.setParameter(null, "sortOrder", order);
      var fragment = xsltProcessor.transformToFragment(xmlDoc,document);
      var containerElement = document.getElementById("ChargeableMessages");
      while (containerElement.hasChildNodes())
            {
            containerElement.removeChild(containerElement.lastChild);
            }
      myDOM = fragment;
      document.getElementById("ChargeableMessages").appendChild(fragment);        
      }
else if (window.ActiveXObject) // Internet Explorer
      {
      var xslDoc=new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
      var rsltDoc=new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
      var xslTemplate=new ActiveXObject("MSXML2.XSLTemplate");
      xslDoc.load(myXSLStylesheet.XMLDocument);
      xslTemplate.stylesheet=xslDoc;
      var xslProc=xslTemplate.createProcessor();
      xslProc.input=myXMLData.XMLDocument;
      xslProc.addParameter("sortKey", column);
      xslProc.addParameter("sortOrder", order);
      xslProc.transform();
      ChargeableMessages.innerHTML = xslProc.output;      
      return false;
      }
else
      {
      alert('Your browser does not support client-side XSL transformations.'); // unsupported browser
      }
}
//]]></script>
            <title>Bell proof of concept</title>
      </head>
      <body onload="sortXML();">
            <div id="ChargeableMessages" />
            <xml id="myXMLData" style="display:none;">
                  <myXMLData xmlns="">
                        <BTN number="635 5669">
                              <Section number="430c" type="Detail" subHead1="Advantage Per Call" subHead2="">
                                    <ServiceHeader group="Canada">
                                          <message>
                                                <id>1-06</id>
                                                <date>2005-05-06</date>
                                                <location>Collingwood ON</location>
                                                <number>705 445 1030</number>
                                                <duration>1.4</duration>
                                                <charges>5.01</charges>
                                                <savings />
                                                <amount />
                                          </message>
                                          <message>
                                                <id>1-07</id>
                                                <date>2005-04-12</date>
                                                <location>Erin ON</location>
                                                <number>519 833 2380</number>
                                                <duration>1.1</duration>
                                                <charges>0.78</charges>
                                                <savings />
                                                <amount />
                                          </message>
                                          <message>
                                                <id>1-08</id>
                                                <date>2005-04-09</date>
                                                <location>Barrie ON</location>
                                                <number>705 726 4242</number>
                                                <duration>.5</duration>
                                                <charges>0.47</charges>
                                                <savings />
                                                <amount />
                                          </message>
                                          <message>
                                                <id>1-09</id>
                                                <date>2005-05-09</date>
                                                <location>Longueuil QC</location>
                                                <number>450 463 7180</number>
                                                <duration>1.6</duration>
                                                <charges>0.69</charges>
                                                <savings />
                                                <amount />
                                          </message>
                                    </ServiceHeader>
                                    <ServiceHeader group="United States">
                                          <message>
                                                <id>1-10</id>
                                                <date>2005-05-10</date>
                                                <location>Folsom CA</location>
                                                <number>916 355 7200</number>
                                                <duration>2.4</duration>
                                                <charges>2.54</charges>
                                                <savings />
                                                <amount />
                                          </message>
                                          <message>
                                                <id>1-11</id>
                                                <date>2005-04-04</date>
                                                <location>Burlington MA</location>
                                                <number>781 270 1695</number>
                                                <duration>6</duration>
                                                <charges>10.35</charges>
                                                <savings />
                                                <amount />
                                          </message>
                                    </ServiceHeader>
                              </Section>
                              <Section number="450c" type="Summary" subHead1="" subHead2="">
            
            </Section>
                        </BTN>
                        
                  </myXMLData>
            </xml>
            <xml id="myXSLStylesheet" style="display:none;">
                  <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
                        <xsl:output method="html" />
                        <xsl:param name="sortKey" />
                        <xsl:param name="sortOrder" />
                        <xsl:template match="/">
                              <xsl:apply-templates select="myXMLData" />
                        </xsl:template>
                        <xsl:template match="myXMLData">
                              <xsl:apply-templates select="//BTN" />
                        </xsl:template>
                        <xsl:template match="//BTN">
                              <b><xsl:value-of select="@number" /></b>
                              <xsl:for-each select="Section[@type='Detail']">
                                    <table border="1">
                                          <th colspan="6" align="left">
                                                <xsl:value-of select="@subHead1" /> - click on any column to sort
                                          </th>
                                          <tr>
                                                <th>
                                                      <a href="#" onclick="return sortXML(this);">ID</a>
                                                </th>
                                                <th>
                                                      <a href="#" onclick="return sortXML(this);">Date</a>
                                                </th>
                                                <th>
                                                      <a href="#" onclick="return sortXML(this);">Location</a>
                                                </th>
                                                <th>
                                                      <a href="#" onclick="return sortXML(this);">Number</a>
                                                </th>
                                                <th>
                                                      <a href="#" onclick="return sortXML(this);">Duration</a>
                                                </th>
                                                <th>
                                                      <a href="#" onclick="return sortXML(this);">Charges</a>
                                                </th>
                                          </tr>
                                          <xsl:apply-templates select="ServiceHeader" />
                                    </table>
                                    <br />
                              </xsl:for-each>
                        </xsl:template>
                        <xsl:template match="ServiceHeader">
                              <xsl:if test="@group != '' ">
                                    <tr>
                                          <td colspan="6">
                                                <xsl:value-of select="@group" />
                                          </td>
                                    </tr>
                              </xsl:if>
                              <xsl:choose>
                                    <xsl:when test="($sortKey = 'duration') or ($sortKey = 'charges')">
                                          <xsl:apply-templates select="message">
                                                <xsl:sort select="*[name() = $sortKey]" order="{$sortOrder}" data-type="number" />
                                          </xsl:apply-templates>
                                    </xsl:when>
                                    <xsl:otherwise>
                                          <xsl:apply-templates select="message">
                                                <xsl:sort select="*[name() = $sortKey]" order="{$sortOrder}" data-type="text" />
                                          </xsl:apply-templates>
                                    </xsl:otherwise>
                              </xsl:choose>
                        </xsl:template>
                        <xsl:template match="message">
                              <tr>
                                    <td>
                                          <xsl:value-of select="id" />
                                    </td>
                                    <td>
                                          <xsl:value-of select="date" />
                                    </td>
                                    <td>
                                          <xsl:value-of select="location" />
                                    </td>
                                    <td>
                                          <xsl:value-of select="number" />
                                    </td>
                                    <td>
                                          <xsl:value-of select="duration" />
                                    </td>
                                    <td>
                                          <xsl:value-of select="charges" />
                                    </td>
                              </tr>
                        </xsl:template>
                  </xsl:stylesheet>
            </xml>
      </body>
</html>

0
mariita
Asked:
mariita
  • 4
  • 3
  • 3
  • +1
1 Solution
 
archrajanCommented:
try to change it to the old fashioned way like this

<a href="javascript:sortXML(this)">ID</a>
0
 
archrajanCommented:
the sort parameter is not getting picked up from the innerHTML property.
BECAUSE
when you alert theLink.innerHTML it returns undefined
0
 
mariitaAuthor Commented:
Then how do I access that property in IE?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
archrajanCommented:
try
theLink.innerText

but innerHTML is supported by IE i am wondering why it is returning undefined
0
 
ThaSmartUnoCommented:
the error i'm getting from that is

Line 63
Object doesn't support this property or method.

the line to fix works fine in my browser
0
 
archrajanCommented:
with the code you already had
this line
 xslTemplate.stylesheet=xslDoc;
IS THE PROBLEM
0
 
mariitaAuthor Commented:
TheSmartUno: what is it that works fine in your browser?
0
 
ThaSmartUnoCommented:
it displays fine ... it gives an error when you click on a link .. but the error is for line 64 which is "xslDoc.load(myXSLStylesheet.XMLDocument);"
0
 
mariitaAuthor Commented:
The problem is not the initial page load. I am trying to make the data sort when I click the link.
0
 
ThaSmartUnoCommented:
i know ... but you show in your code that you think its this line
column = theLink.innerHTML.toLowerCase(); // fix this line

when in fact if you put alert(column) under that it works fine ... so its actually a different problem
0
 
ZvonkoSystems architectCommented:
Close the <div> tag correctly and all problems will go away:
          <div id="ChargeableMessages" > </div>


0
 
ZvonkoSystems architectCommented:
:-)
0

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

  • 4
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now