?
Solved

Sort an xml data island and apply the result in javascript

Posted on 2006-07-24
4
Medium Priority
?
394 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 2000 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

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

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, …
Create a Windows 10 custom Image with custom task bar and custom start menu using XML for deployment.
Whether it be Exchange Server Crash Issues, Dirty Shutdown Errors or Failed to mount error, Stellar Phoenix Mailbox Exchange Recovery has always got your back. With the help of its easy to understand user interface and 3 simple steps recovery proced…
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses

850 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