Solved

any way of sorting an xml onclick

Posted on 2009-05-13
16
335 Views
Last Modified: 2013-11-18
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
Comment
Question by:d1114170
[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
  • 9
  • 7
16 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24372454
0
 

Author Comment

by:d1114170
ID: 24374758
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24374823
Dunno - show the html output?
0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

Author Comment

by:d1114170
ID: 24375489
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24375557
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
 

Author Comment

by:d1114170
ID: 24376036
I viewed the generated source and saved that as a htm page and the sort didnt work on that either?!

very strange.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24376598
So post it and we will take a look
0
 

Author Comment

by:d1114170
ID: 24382570
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24382674
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
 

Author Comment

by:d1114170
ID: 24383047
it appears to be the javascript on my page that causes the sort not to work!?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24383065
Quite possible

I cannot test that since I do not have the scripts you use
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24383075
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
 

Author Comment

by:d1114170
ID: 24393110
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24393281
Yes, you need to create an object sort for numerical or date items - especially if you prefix them with £/$
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 24393298
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
 

Author Comment

by:d1114170
ID: 24394650
hi thanks.
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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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. 
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

734 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