Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 345
  • Last Modified:

any way of sorting an xml onclick

gooday,

is there anyway of allowing the user to sort the xml data using the xsl file 'onclick' of column header?
at the moment this can be done using table sort but the code I have for that does not seem to sort all the columns correctly so if you have a good javaascript that can do that then that should be ok, but ideally using the xsl?!

thanks
0
d1114170
Asked:
d1114170
  • 9
  • 7
1 Solution
 
Michel PlungjanIT ExpertCommented:
0
 
d1114170Author Commented:
Hi thanks,

that is the best javascript code I have seen yet and it works well with my static tables.
I am however trying to use this within my xsl document and it doesnt seem to be working.

<table class="sortable">
  <thead>
    <xsl:call-template name="tblHeaders" />
  </thead>
  <tbody>
    <xsl:call-template name="Flights" />
  </tbody>
</table>

with the javascript sitting in the holding htm page that calls the xsl and xml.

any ideas as to how to do it this way?
0
 
Michel PlungjanIT ExpertCommented:
Dunno - show the html output?
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!

 
d1114170Author Commented:
The html output looks like this...
<table class="sortable">
            <thead>
                <tr>
                    <th id="tblHeader" style="width: 310px;">
                        Destination
                    </th>
                    <th id="tblHeader" style="width: 75px;">
                        Airline
                    </th>
                    <th id="tblHeader" style="width: 190px;">
                        Travel Between
                    </th>
                    <th id="tblHeader" style="width: 100px;">
                        Book By
                    </th>
                    <th id="tblHeader"style="width: 115px;">
                        Eligibility
                    </th>
                    <th id="tblHeader" colspan="2" style="width: 130px;">
                        From
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="destDiv" style="float: left; padding-left: 5px; width: 310px;">
                        <a href="http://ibe.statravel.co.uk/flightSearch.asp?DDEP=LHR&DARR=YYZ&RTN=RTN&ADEP=YYZ&AARR=LHR&PXNUM=1">
                            London Heathrow to Toronto - Direct</a>
                    </td>
0
 
Michel PlungjanIT ExpertCommented:
And that works when you paste this into an html page?

If so, then perhaps you invoke the sortable before the table has rendered...
0
 
d1114170Author Commented:
I viewed the generated source and saved that as a htm page and the sort didnt work on that either?!

very strange.
0
 
Michel PlungjanIT ExpertCommented:
So post it and we will take a look
0
 
d1114170Author Commented:
hi,.

here is a snippet from my html page created from the view generated page source.



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Cheap Flights</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link href="xsl.css" rel="Stylesheet" type="text/css">
 
    <script type="text/javascript" src="script/sarissa.js"></script>
 
    <script type="text/javascript" src="script/sarissa_ieemu_xpath.js"></script>
 
    <script type="text/javascript" src="sorttable.js"></script>
 
    <script type="text/javascript" language="JavaScript">
          <!--
        // create the xml document object
        var oXML = Sarissa.getDomDocument();
        oXML.async = false;
        oXML.load("xmloffers.xml");
        //alert(new XMLSerializer().serializeToString(oXML));
 
        // create an object from the xsl
        var oXSL = Sarissa.getDomDocument();
        oXSL.async = false;
        oXSL.load("xslTable.xsl");
        //alert(new XMLSerializer().serializeToString(oXSL));
 
        function displayTop() {
            var xsltProc = new XSLTProcessor();
            xsltProc.importStylesheet(oXSL);
            var transformResult = xsltProc.transformToDocument(oXML);
            //alert(new XMLSerializer().serializeToString(transformResult));
            document.getElementById("xslReload").innerHTML = new XMLSerializer().serializeToString(transformResult);
 
        }
 
        function displayResult(CID) {
            var xsltProc = new XSLTProcessor();
            xsltProc.importStylesheet(oXSL);
            xsltProc.setParameter('', "continentID", CID);
            var transformResult = xsltProc.transformToDocument(oXML);
            //alert(new XMLSerializer().serializeToString(transformResult));
            document.getElementById("xslReload").innerHTML = new XMLSerializer().serializeToString(transformResult);
 
        }
 
          // -->
    </script>
 
</head>
<body onload="displayTop()">
    <div id="xslReload">
        <div xmlns="" class="head1">
            Top Offers</div>
        <ul xmlns="" class="menuTab">
            <li><a href="#" onclick="displayResult('')">Top Offers</a></li><li><a
                href="#" onclick="displayResult('A')">North America</a></li><li><a href="#" onclick="displayResult('B')">
                    Europe</a></li><li><a href="#" onclick="displayResult('C')">Asia</a></li><li><a href="#"
                        onclick="displayResult('D')">Australia, NZ and South Pacific</a></li><li><a href="#"
                            onclick="displayResult('E')">Latin America</a></li><li><a href="#" onclick="displayResult('F')">
                                Africa</a></li><li><a href="#" onclick="displayResult('G')">Middle East</a></li></ul>
        <table class="sortable">
            <thead>
                <tr>
                    <th id="tblHeader" style="width: 310px;">
                        Destination
                    </th>
                    <th id="tblHeader" style="width: 75px;">
                        Airline
                    </th>
                    <th id="tblHeader" style="width: 190px;">
                        Travel Between
                    </th>
                    <th id="tblHeader" style="width: 100px;">
                        Book By
                    </th>
                    <th id="tblHeader"style="width: 115px;">
                        Eligibility
                    </th>
                    <th id="tblHeader" colspan="2" style="width: 130px;">
                        From
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="destDiv" style="float: left; padding-left: 5px; width: 310px;">
                        <a href="http://*********.*********.co.uk/*********.asp?DDEP=LHR&amp;DARR=YYZ&amp;RTN=RTN&amp;ADEP=YYZ&amp;AARR=LHR&amp;PXNUM=1">
                            London Heathrow to Toronto - Direct</a>
                    </td>
                    <td style="float: left; padding-left: 5px; width: 60px;">
                        <img src="http://*********.*********.co.uk/images/xmlfares/logos/britishairways.gif" alt="British Airways"
                            border="0" height="30" width="40">
                    </td>
                    <td style="float: left; padding-left: 5px; width: 190px;">
                        09/04/2009 - 17/06/2009
                    </td>
                    <td style="float: left; padding-left: 5px; width: 90px;">
                        28/04/2009
                    </td>
                    <td style="float: left; padding-left: 5px; width: 110px;">
                        Everyone
                    </td>
                    <td style="float: left; padding-left: 5px; width: 50px;">
                        <a style="color: rgb(255, 204, 0);" href="http://*********.*********.co.uk/*********.asp?DDEP=LHR&amp;DARR=YYZ&amp;RTN=RTN&amp;ADEP=YYZ&amp;AARR=LHR&amp;PXNUM=1">
                            £325</a>
                    </td>
                    <td style="float: left; padding-left: 5px;">
                        <a href="http://*********.*********.co.uk/*********.asp?DDEP=LHR&amp;DARR=YYZ&amp;RTN=RTN&amp;ADEP=YYZ&amp;AARR=LHR&amp;PXNUM=1">
                            <img src="bookNow.gif" border="0"></a>
                    </td>
                </tr>
                <tr xmlns="">
                    <td id="destDiv" style="float: left; padding-left: 5px; width: 310px;">
                        <a href="http://*********.*********.co.uk/*********.asp?DDEP=LHR&amp;DARR=YYZ&amp;RTN=RTN&amp;ADEP=YYZ&amp;AARR=LHR&amp;PXNUM=1">
                            London Heathrow to Toronto - Direct</a>
                    </td>
                    <td style="float: left; padding-left: 5px; width: 60px;">
                        <img src="http://*********.*********.co.uk/images/xmlfares/logos/aircanada.gif" alt="Air Canada"
                            border="0" height="30" width="40">
                    </td>
                    <td style="float: left; padding-left: 5px; width: 190px;">
                        09/04/2009 - 17/07/2009
                    </td>
                    <td style="float: left; padding-left: 5px; width: 90px;">
                        28/04/2009
                    </td>
                    <td style="float: left; padding-left: 5px; width: 110px;">
                        Everyone
                    </td>
                    <td style="float: left; padding-left: 5px; width: 50px;">
                        <a style="color: rgb(255, 204, 0);" href="http://*********.*********.co.uk/*********.asp?DDEP=LHR&amp;DARR=YYZ&amp;RTN=RTN&amp;ADEP=YYZ&amp;AARR=LHR&amp;PXNUM=1">
                            £345</a>
                    </td>
                    <td style="float: left; padding-left: 5px;">
                        <a href="http://*********.*********.co.uk/*********.asp?DDEP=LHR&amp;DARR=YYZ&amp;RTN=RTN&amp;ADEP=YYZ&amp;AARR=LHR&amp;PXNUM=1">
                            <img src="bookNow.gif" border="0"></a>
                    </td>
                </tr>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I moved the snippets to the snippet box for you

Anyway - I actually use THIS myself
http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited

but your html works if you have different data:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Cheap Flights</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
 
</head>
<body onload="displayTop()">
    <div id="xslReload">
        <div xmlns="" class="head1">
            Top Offers</div>
        <ul xmlns="" class="menuTab">
            <li><a href="#" onclick="displayResult('')">Top Offers</a></li><li><a
                href="#" onclick="displayResult('A')">North America</a></li><li><a href="#" onclick="displayResult('B')">
                    Europe</a></li><li><a href="#" onclick="displayResult('C')">Asia</a></li><li><a href="#"
                        onclick="displayResult('D')">Australia, NZ and South Pacific</a></li><li><a href="#"
                            onclick="displayResult('E')">Latin America</a></li><li><a href="#" onclick="displayResult('F')">
                                Africa</a></li><li><a href="#" onclick="displayResult('G')">Middle East</a></li></ul>
        <table class="sortable">
            <thead>
                <tr>
                    <th id="tblHeader" style="width: 310px;">
                        Destination
                    </th>
                    <th id="tblHeader" style="width: 75px;">
                        Airline
                    </th>
                    <th id="tblHeader" style="width: 190px;">
                        Travel Between
                    </th>
                    <th id="tblHeader" style="width: 100px;">
                        Book By
                    </th>
                    <th id="tblHeader"style="width: 115px;">
                        Eligibility
                    </th>
                    <th id="tblHeader" colspan="2" style="width: 130px;">
                        From
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="destDiv" style="float: left; padding-left: 5px; width: 310px;">
                        <a href="http://*********.*********.co.uk/*********.asp?DDEP=LHR&amp;DARR=YYZ&amp;RTN=RTN&amp;ADEP=YYZ&amp;AARR=LHR&amp;PXNUM=1">
                            London Heathrow to Toronto - Direct</a>
                    </td>
                    <td style="float: left; padding-left: 5px; width: 60px;">
                        <img src="http://*********.*********.co.uk/images/xmlfares/logos/britishairways.gif" alt="British Airways"
                            border="0" height="30" width="40">
                    </td>
                    <td style="float: left; padding-left: 5px; width: 190px;">
                        09/04/2009 - 17/06/2009
                    </td>
                    <td style="float: left; padding-left: 5px; width: 90px;">
                        28/04/2009
                    </td>
                    <td style="float: left; padding-left: 5px; width: 110px;">
                        Everyone
                    </td>
                    <td style="float: left; padding-left: 5px; width: 50px;">
                        <a style="color: rgb(255, 204, 0);" href="http://*********.*********.co.uk/*********.asp?DDEP=LHR&amp;DARR=YYZ&amp;RTN=RTN&amp;ADEP=YYZ&amp;AARR=LHR&amp;PXNUM=1">325</a>
                    </td>
                    <td style="float: left; padding-left: 5px;">
                        <a href="http://*********.*********.co.uk/*********.asp?DDEP=LHR&amp;DARR=YYZ&amp;RTN=RTN&amp;ADEP=YYZ&amp;AARR=LHR&amp;PXNUM=1">
                            <img src="bookNow.gif" border="0"></a>
                    </td>
                </tr>
                <tr xmlns="">
                    <td id="destDiv" style="float: left; padding-left: 5px; width: 310px;">
                        <a href="http://*********.*********.co.uk/*********.asp?DDEP=LHR&amp;DARR=YYZ&amp;RTN=RTN&amp;ADEP=YYZ&amp;AARR=LHR&amp;PXNUM=1">
                            Toronto to London Heathrow - Direct</a>
                    </td>
                    <td style="float: left; padding-left: 5px; width: 60px;">
                        <img src="http://*********.*********.co.uk/images/xmlfares/logos/aircanada.gif" alt="Air Canada"
                            border="0" height="30" width="40">
                    </td>
                    <td style="float: left; padding-left: 5px; width: 190px;">
                        09/04/2009 - 17/07/2009
                    </td>
                    <td style="float: left; padding-left: 5px; width: 90px;">
                        28/05/2009
                    </td>
                    <td style="float: left; padding-left: 5px; width: 110px;">
                        Everyone
                    </td>
                    <td style="float: left; padding-left: 5px; width: 50px;">
                        <a style="color: rgb(255, 204, 0);" href="http://*********.*********.co.uk/*********.asp?DDEP=LHR&amp;DARR=YYZ&amp;RTN=RTN&amp;ADEP=YYZ&amp;AARR=LHR&amp;PXNUM=1">
                            445</a>
                    </td>
                    <td style="float: left; padding-left: 5px;">
                        <a href="http://*********.*********.co.uk/*********.asp?DDEP=LHR&amp;DARR=YYZ&amp;RTN=RTN&amp;ADEP=YYZ&amp;AARR=LHR&amp;PXNUM=1">
                            <img src="bookNow.gif" border="0"></a>
                    </td>
                </tr>
                </table>
  </body>
</html>

Open in new window

0
 
d1114170Author Commented:
it appears to be the javascript on my page that causes the sort not to work!?
0
 
Michel PlungjanIT ExpertCommented:
Quite possible

I cannot test that since I do not have the scripts you use
0
 
Michel PlungjanIT ExpertCommented:
Possibly you need to look to see if something overwrites the onload and you need to move the displaytop() from the onload

window.onload = sorttable.init;



0
 
d1114170Author Commented:
I have introduced my own sorting using sarissa js and loading the xml and xsl back into the page.
it seems to be working fine other than for date and currency
0
 
Michel PlungjanIT ExpertCommented:
Yes, you need to create an object sort for numerical or date items - especially if you prefix them with £/$
0
 
Michel PlungjanIT ExpertCommented:
For example this



function sortCurrency(a,b) {
  a = parseFloat(a.replace(/[^0-9.]/g,''));
  b = parseFloat(b.replace(/[^0-9.]/g,''));
  if (isNaN(a)) a = 0;
  if (isNaN(b)) b = 0;
  return a-b;
}
 
and then use sort(sortCurrency)

Open in new window

0
 
d1114170Author Commented:
hi thanks.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now