Sort an xml data island and apply the result in javascript

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
LVL 8
plqAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Suat OzgurWeb / Application DeveloperCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
plqAuthor Commented:
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
Suat OzgurWeb / Application DeveloperCommented:
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
plqAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
XML

From novice to tech pro — start learning today.