Problem using Jquery and XMl to sort links by their number

Problem using Jquery and XMl to sort links by their number

Hello everyone,
I've tried to sort links I've got in a XML file. I've using AJAX from jquery but I have problems.
I wanted to create links order by their number into panels that can slide.
Panels can slide but I'm a beginner using Jquery and Javascript and i don't know how I can do using AJAX to import my XML and sort it.
But wait there's more ! In my XML I have a "commen" section that I wanted to show in "commentaire" section on my HTML every time mouse come over a link...
I know it's a little bit complicated for a beginner, and my skills in english are not great to explicated what i wanted to do.
There's my code :
  1. <HTML>
       <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title>index intuitif</title>
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>  
       </head>
       <body>
          <table id = "tableau" border =1>
             <td>
                <div class="toggle-info" onClick=theme1()>
                   <h1>Theme 1 </h1>
                </div>
                <div class="info-panel">
                   <ul id = "theme1">
                      <li> <a href= "" onMouseOver=displayBD(1)> Lien 1 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(2)> Lien 2 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(3)> Lien 3 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(4)> Lien 4 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(5)> Lien 5 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(6)> Lien 6 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(7)> Lien 7 </a> </li>
                   </ul>
                </div>
             </td>
             <td>
                <div class="toggle-info">
                   <h1>Theme 2 </h1>
                </div>
                <div class="info-panel" onClick=theme2()>
                   <ul id = "theme2">
                      <li> <a href= "" onMouseOver=displayBD(1)> Lien 1 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(2)> Lien 2 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(3)> Lien 3 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(4)> Lien 4 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(5)> Lien 5 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(6)> Lien 6 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(7)> Lien 7 </a> </li>
                   </ul>
                </div>
             </td>
             <td>
                <div class="toggle-info">
                   <h1>Theme3</h1>
                </div>
                <div class="info-panel" onClick=theme3()>
                   <ul id= "theme3">
                      <li> <a href= "" onMouseOver=displayBD(1)> Lien 1 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(2)> Lien 2 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(3)> Lien 3 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(4)> Lien 4 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(5)> Lien 5 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(6)> Lien 6 </a> </li>
                      <li> <a href= "" onMouseOver=displayBD(7)> Lien 7 </a> </li>
                   </ul>
                </div>
             </td>
          </table>
          <div id="commentaire">
             Bonsoir
          </div>
          <script>
             var nbr_lignes = document.getElementById('tableau').rows.length;
             var nbr_colonnes = document.getElementById('tableau').getElementsByTagName('tr')[0].getElementsByTagName('td').length;
             var nbr_colonnes = document.getElementById('tableau').rows[0].cells.length;
             var themeSelect ;
             var i  =  0 ;
             var ndecs;
             var contenu=" ";
             var results = new Array ;
             var descrithem1= new Array;
             var descrithem2= new Array;
             var descrithem3= new Array; 
             var length1 = $('#theme1 > *').length;
             var length2 = $('#theme2 > *').length;
             var length3 = $('#theme3 > *').length;
             var lengthmax1= length1;
             var lengthmax2= length2;
             var lengthmax3= length3;
             var themeSelect;
             var commentaira;
             var $xml= $.parseXML('<bds> <serie1 id="1"> <desc> <num> 2 </num><title>we are on 1 </title><commen>HI </commen><URL>Idk</URL></desc><desc><num> 1 </num><title>we are on  2 </title><commen>Hello world </commen><URL>Baptiste</URL></desc></serie1></bds>')
             /*
                function theme1(){
                themeSelect = 1 ;
                }
                function theme2(){
                themeSelect = 2 ;
                }
                function theme3(){
                themeSelect = 3 ;
                }
                 function ajout(){
                 var themeajout=prompt("theme to add");
                 if (themeajout==1)
                 {
                 ndecs = prompt ("new description");
                 descrithem1.push(ndecs);
                
                 }
                 if (themeajout==2)
                 {
                 ndecs = prompt ("new description");
                 descrithem2.push(ndecs);
                 }
                 if (themeajout==3)
                 {
                 ndecs = prompt ("new description");
                 descrithem3.push(ndecs);
                 }
                 }
                 function affichage ()
                 {   
                 var div = document.getElementById("commentaire");
                     div.textContent = descri[i];
                     var text = div.textContent;
                 }
                 */

                 /*
                 function ajoutLien(){
                 var numtheme = prompt("numero de votre theme");
                 if (numtheme == 1)
                 {
                 lengthmax1= lengthmax1 +1 ;
                 document.getElementById('theme1').innerHTML += "<li> <a href= \"\" id=\"3-1\" onMouseOver=Lien(1)> Lien " + lengthmax1 +" </a> </li>";
                 }
                 if (numtheme == 2)
                 {
                 lengthmax2= lengthmax2 +1 ;
                 document.getElementById('theme2').innerHTML += "<li> <a href= \"\" id=\"3-1\" onMouseOver=Lien(1)> Lien " + lengthmax2 +" </a> </li>";
                 }
                 if (numtheme == 3)
                 {
                 lengthmax3= lengthmax3 +1 ;
                 document.getElementById('theme3').innerHTML += "<li> <a href= \"\" id=\"3-1\" onMouseOver=Lien(1)> Lien " + lengthmax3 +" </a> </li>";
                 }
                 }
    */
                 $(function() {
                 $(".toggle-info").on("click", function() {
                 if($(this).next(".info-panel").attr('style') == 'display: block;'){
                 $(this).next(".info-panel").slideUp(200);
                 } else {
                 $(".info-panel").each(function(){
                 $(this).slideUp(200);
                 });
                 $(this).next(".info-panel").slideToggle(200);
                 }   
                 });
                 $(".info-panel").on("click", function() {
                 $(this).slideUp(200);
                 });
                 });
    $(document).ready(  
    function()
     {$.ajax({
                type: "GET",
                url: "text.xml",
                dataType: "xml",
                success: function(xml)
                         {
                           $(xml).find('bds').each(  
                             function()
                             {
                                var id = $(this).attr('id');
                                alert (id);
                                $(this).find('desc').each(
                               
                                                function()
                                                {
                                               
                                                    var commen = $(this).find('commen').text();
                                                    var title = $(this).find('title').text();
                                                    var URL = $(this).find('URL').text();
                                                });
                              });
                          }
            });
      }
    );
    $($xml).find('serie1').each(function() {
    var commen = $(this).find('commen').text();
    var title = $(this).find('title').text();
    var URL = $(this).find('URL').text();
    var num = $(this).find('num').text();

        results.push({
            id: $(this).attr('id'),
            num : num,
            commen: commen,
            title: title,
            URL: URL
        });
    })
        results.sort(function(a, b) {
        return a.num > b.num;
    });
        var html=[];
    $.each(results, function() {
       html.push('<div>commentaires : ' + this.commen + '</div>')

    })
    $('body').append( html.join(''))

     function displayBD(inte)
     {
    alert(this.results);
    if (this.num ==inte)
    {commentaira = results.commen;
    document.getElementById("commentaire").innerHTML = results.commen;
    }

    alert(commentaira);
     }
     
          </script>
          <style type='text/css'>
             .toggle-info {
             cursor: pointer;
             }
             .info-panel {
             display: none;
             cursor: pointer;
             }
             * { font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: .95em; }
             fieldset { margin: 15px; padding-left: 1em; padding-right: 1em; padding-bottom: 1em; }
             legend { margin: 10px; }
             #outputBDFieldset { display: none; }
             #nbBD {    font-weight: normal; }
          </style>
       </body>
    </HTML>
Many functions are here before I'm using Jquery (in commentary).
I'm using the var $xml for testing. But my XML is bigger :


  1. <?xml version="1.0" encoding="iso-8859-1"?>
    <bds>
            <serie1 id="1">
                    <desc>
                            <num> 1 </num>
                            <title>nous sommes sur le lien 1 </title>
                            <commen>Hello </commen>
                            <URL>Baptiste</URL>
                    </desc>
                    <desc>
                            <num> 2 </num>
                            <title>nous sommes sur le lien 2 </title>
                            <commen>HI </commen>
                            <URL>Baptiste</URL>
                    </desc>
                    <desc>
                            <num> 3 </num>
                            <title>nous sommes sur le lien 3 </title>
                            <commen>How are you  </commen>
                            <URL>Gars inconnu</URL>
                    </desc>
                    <desc>
                            <num> 4 </num>
                            <title>nous sommes sur le lien 4 </title>
                            <commen>Idk  </commen>
                            <URL>Raymond</URL>
                    </desc>
                    <desc>
                            <num> 5 </num>
                            <title>nous sommes sur le lien 5 </title>
                            <commen>Thank you </commen>
                            <URL>Eric</URL>
                    </desc>
                    <desc>
                            <num> 6 </num>
                            <title>nous sommes sur le lien 6 </title>
                            <commen>You're welcome  </commen>
                            <URL>Baptiste</URL>
                    </desc>
                    <desc>
                            <num> 7 </num>
                            <title>nous sommes sur le lien 7 </title>
                            <commen>Sorry </commen>
                            <URL>Céline</URL>
                    </desc>
            </serie1>
                <serie2 id="2">
                    <desc>
                            <num> 1 </num>
                            <title>nous sommes sur le lien 1 </title>
                            <commen>Hello </commen>
                            <URL>Baptiste</URL>
                    </desc>
                    <desc>
                            <num> 2 </num>
                            <title>nous sommes sur le lien 2 </title>
                            <commen>HI </commen>
                            <URL>Baptiste</URL>
                    </desc>
                    <desc>
                            <num> 3 </num>
                            <title>nous sommes sur le lien 3 </title>
                            <commen>How are you  </commen>
                            <URL>Gars inconnu</URL>
                    </desc>
                    <desc>
                            <num> 4 </num>
                            <title>nous sommes sur le lien 4 </title>
                            <commen>Idk  </commen>
                            <URL>Raymond</URL>
                    </desc>
                    <desc>
                            <num> 5 </num>
                            <title>nous sommes sur le lien 5 </title>
                            <commen>Thank you </commen>
                            <URL>Eric</URL>
                    </desc>
                    <desc>
                            <num> 6 </num>
                            <title>nous sommes sur le lien 6 </title>
                            <commen>You're welcome  </commen>
                            <URL>Baptiste</URL>
                    </desc>
                    <desc>
                            <num> 7 </num>
                            <title>nous sommes sur le lien 7 </title>
                            <commen>Sorry </commen>
                            <URL>Céline</URL>
                    </desc>
            </serie2>
                <serie3 id="3">
                    <desc>
                            <num> 1 </num>
                            <title>nous sommes sur le lien 1 </title>
                            <commen>Hello </commen>
                            <URL>Baptiste</URL>
                    </desc>
                    <desc>
                            <num> 2 </num>
                            <title>nous sommes sur le lien 2 </title>
                            <commen>HI </commen>
                            <URL>Baptiste</URL>
                    </desc>
                    <desc>
                            <num> 3 </num>
                            <title>nous sommes sur le lien 3 </title>
                            <commen>How are you  </commen>
                            <URL>Gars inconnu</URL>
                    </desc>
                    <desc>
                            <num> 4 </num>
                            <title>nous sommes sur le lien 4 </title>
                            <commen>Idk  </commen>
                            <URL>Raymond</URL>
                    </desc>
                    <desc>
                            <num> 5 </num>
                            <title>nous sommes sur le lien 5 </title>
                            <commen>Thank you </commen>
                            <URL>Eric</URL>
                    </desc>
                    <desc>
                            <num> 6 </num>
                            <title>nous sommes sur le lien 6 </title>
                            <commen>You're welcome  </commen>
                            <URL>Baptiste</URL>
                    </desc>
                    <desc>
                            <num> 7 </num>
                            <title>nous sommes sur le lien 7 </title>
                            <commen>Sorry </commen>
                            <URL>Céline</URL>
                    </desc>
            </serie3>
    </bds>
If you have a solution to have and parse XML object to treat the number of links because I wanted to create them according to the number of links in the panels according to the number of links in the XML...
I don't even know if i can do that. But
thank you for your reading.