Solved

Sort an xml data island and apply the result in javascript

Posted on 2006-07-24
4
378 Views
Last Modified: 2008-10-17
I have an xml data island like this.. actually a few hundred web pages using a similar form

<xml id="xmldataisland">
<table_T>
    <table_R>
         <field1>1</field1>
         <field2>Beer</field1>
         <field3>Mmm</field3>
    </table_R>
    <table_R>
         <field1>2</field1>
         <field2>Wine</field1>
         <field3>kkk</field3>
    </table_R>
</table_T>
</xml>

that is, root > record > fields

I would like to write a javascript function to sort the records within the xml data island by a view.

So for example

        sortmyisland(xmldataisland, "field2");

I haven't got a clue about xsl - if anyone could help me write this I would be grateful.

thanks
0
Comment
Question by:plq
  • 2
  • 2
4 Comments
 
LVL 17

Accepted Solution

by:
Suat Ozgur earned 500 total points
ID: 17174534
Hi,

Please save the following scripts in given file names and put them into the same web folder then open test.html in your browser.

1- XML File: Save as test.xml (This is your sample XML content that you shown above)
<?xml version="1.0" encoding="ISO-8859-1"?>
<xml id="xmldataisland">
<table_T>
    <table_R>
         <field1>1</field1>
         <field2>Beer</field2>
         <field3>Mmm</field3>
    </table_R>
    <table_R>
         <field1>2</field1>
         <field2>Wine</field2>
         <field3>kkk</field3>
    </table_R>
</table_T>
</xml>

2- XSL File: Save as test.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:param name="sortby"/>
<xsl:template match="/">
    <h2>XML Data Island</h2>
    <table border="1">
      <tr bgcolor="#cccccc">
        <th align="left"><a href="javascript:sortme('field1');">Field1</a></th>
        <th align="left"><a href="javascript:sortme('field2');">Field2</a></th>
        <th align="left"><a href="javascript:sortme('field3');">Field3</a></th>
      </tr>
      <xsl:for-each select="xml/table_T/table_R">
      <xsl:sort select="*[name() = $sortby]" data-type="text"/>
      <tr>
        <td><xsl:value-of select="field1" /></td>
        <td><xsl:value-of select="field2" /></td>
        <td><xsl:value-of select="field3" /></td>
      </tr>
      </xsl:for-each>
    </table>
</xsl:template>
</xsl:stylesheet>

3- HTML File: test.html
<html>
<head>
<script type="text/javascript">
function sortme(sortby){
  var container = document.getElementById("containerdiv");
  var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
  var xsldoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
  xsldoc.async = false;
  xsldoc.load('test.xsl'); xslt.stylesheet = xsldoc;

  var xmldoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
  xmldoc.async = false;
  xmldoc.load("test.xml");

  var xslproc;
  xslproc = xslt.createProcessor();
  xslproc.input = xmldoc;
  xslproc.addParameter("sortby", sortby);
  xslproc.transform();
  container.innerHTML = xslproc.output;      
}
</script>
</head>
<body onLoad="sortme('field1');">
<div id="containerdiv">
</div>
</body>
</html>

All I do above is: using XSL stylesheet to create the required table data as HTML by using the given XML data and setting HTML div element's innerHTML as the returned HTML data as the xsl transformation.
Sort is being done with the <a href="javascript:sortme('field1');"> anchor in column headers. We send corresponding tag name to sort data and XSL takes care about sorting by using  <xsl:sort select="*[name() = $sortby]" data-type="text"/> in template. We get the sort key from javascript by using <xsl:param>.

I think it is self-explanatory if you follow the codes but please let us know if there is something that does't make sense.
I hope it helps.

Suat
0
 
LVL 8

Author Comment

by:plq
ID: 17174563
Brilliant - thank you. Makes complete sense, and it works. I've been doing js and xml and xmldom for years but rarely xsl.

Its just a five minute job to move this into my software.

I really appreciate your effort on this one.
0
 
LVL 17

Expert Comment

by:Suat Ozgur
ID: 17174639
You're welcome!
Glad to hear it helps.

I've come here from the question you posted at Javascript section. I think you can close that question now.

Suat
(Thanks for the A grade)
0
 
LVL 8

Author Comment

by:plq
ID: 17174720
Done. If you fancy a go at a more pressing problem please take a look at this...

http://www.experts-exchange.com/Web/Web_Languages/XML/Q_21929280.html
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
Internet Business Fax to Email Made Easy - With  eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, f…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

920 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now