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 :
<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; } */
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();
Many functions are here before I'm using Jquery (in commentary). I'm using the var $xml for testing. But my XML is bigger :
<?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 tothe number of linksin the panelsaccording tothe number of linksin the XML... I don't even know if i can do that. But thank youfor your reading.