?
Solved

Using Javascript to pass parameters from innerHTML to embedded XSL stylesheet

Posted on 2005-03-30
12
Medium Priority
?
431 Views
Last Modified: 2011-09-20
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
Comment
Question by:mariita
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 3
  • +1
12 Comments
 
LVL 25

Expert Comment

by:archrajan
ID: 13664354
try to change it to the old fashioned way like this

<a href="javascript:sortXML(this)">ID</a>
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13664399
the sort parameter is not getting picked up from the innerHTML property.
BECAUSE
when you alert theLink.innerHTML it returns undefined
0
 

Author Comment

by:mariita
ID: 13664412
Then how do I access that property in IE?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Expert Comment

by:archrajan
ID: 13664425
try
theLink.innerText

but innerHTML is supported by IE i am wondering why it is returning undefined
0
 
LVL 10

Expert Comment

by:ThaSmartUno
ID: 13664570
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
 
LVL 25

Expert Comment

by:archrajan
ID: 13664584
with the code you already had
this line
 xslTemplate.stylesheet=xslDoc;
IS THE PROBLEM
0
 

Author Comment

by:mariita
ID: 13664758
TheSmartUno: what is it that works fine in your browser?
0
 
LVL 10

Expert Comment

by:ThaSmartUno
ID: 13664772
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
 

Author Comment

by:mariita
ID: 13664792
The problem is not the initial page load. I am trying to make the data sort when I click the link.
0
 
LVL 10

Expert Comment

by:ThaSmartUno
ID: 13664807
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
 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 13664954
Close the <div> tag correctly and all problems will go away:
          <div id="ChargeableMessages" > </div>


0
 
LVL 63

Expert Comment

by:Zvonko
ID: 13665026
:-)
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question