Solved

Sort an xml data island and apply the result in javascript

Posted on 2006-07-24
4
387 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
[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
  • 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

Independent Software Vendors: 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!

Question has a verified solution.

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

The Client Need Led Us to RSS I recently had an investment company ask me how they might notify their constituents about their newsworthy publications.  Probably you would think "Facebook" or "Twitter" but this is an interesting client.  Their cons…
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. 
In this video we outline the Physical Segments view of NetCrunch network monitor. By following this brief how-to video, you will be able to learn how NetCrunch visualizes your network, how granular is the information collected, as well as where to f…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…

707 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