Récupérer des données et les traiter en XML avec javascript

**Jigghart** · 12/04/2016, 08h48

Bonjour à tous, je vous expose mon souci, j'ai dans l'idée de faire un index intuitif pour mon travail, pour cela je comptais passer par un HTML avec du JS pour essayer d'implémenter les fonctionnalités voulues... Le problème c'est que je n'ai que de petites compétences en javaScript et que me je suis retrouvé rapidement bloqué dans mon travail (Je suis encore en étude).

Voilà donc ce que j'aimerai faire : Faire un index intuitif pour mes collègue celui-ci comporte des liens cliquables, à chaque survol de lien, la section "commentaires" dans ma page change pour mettre la description mise dans le XML, à chaque lien son commentaire sachant que j'ai plusieurs thèmes.

J'évite autant que possible le php, car je suis encore plus nul à ça que le javaScript.

J'aurais bien aimé faire des tableaux pour mettre les différents commentaires dedans et c'était ma première idée, mais le problème est de sauvegarder ensuite le tableaux si l'un de mes collègues change/modifie/ajoute/supprime un lien, c'est peut-être possible, mais je ne sais pas comment faire...

Ensuite, je dois faire en sorte que mes collègues ne passent pas par le code pour ajouter ou modifier voir supprimer un lien.

Voici donc l'idée d'un XML pour avoir mes données de "commentaires" pour les liens, les récupérer suivant le thème ou l'utilisateur clique pour ensuite voir le lien que le pointeur survole et afficher sa description.

Non seulement je dois faire ça, mais aussi penser au future usage de l'application, celle-ci devrait aussi avoir une fonction pour ajouter un lien, ajouter sa description et le mettre dans le thème correspondant.

Elle devra aussi pouvoir supprimer un lien et modifier la description d'un lien.Le problème est là avec mes petites compétences : aucune idée de comment je peux faire pour faire ça dans les règles... j'ai beau chercher sur internet je n'y arrive pas je demande donc votre aide et vous remercie déjà de cette lecture un peu barbante.Voici donc mon code ;

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<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>   
      <script type="text/javascript" src="oDOMImplementation.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>Theme 3</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 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 DOMXML = null;
         var themeSelect
         
            function theme1(){
            themeSelect = 1 ;
            }
            function theme2(){
            themeSelect = 2 ;
            }
            function theme3(){
            themeSelect = 3 ;
            }
             function ajout(){
             var themeajout=prompt("theme à ajouter");
             if (themeajout==1)
             {
             ndecs = prompt ("Votre nouvelle description");
             descrithem1.push(ndecs);
             
             }
             if (themeajout==2)
             {
             ndecs = prompt ("Votre nouvelle description");
             descrithem2.push(ndecs);
             }
             if (themeajout==3)
             {
             ndecs = prompt ("Votre nouvelle description");
             descrithem3.push(ndecs);
             }
             }
             function affichage ()
             {    
             var div = document.getElementById("commentaire");
                 div.textContent = descri[i];
                 var text = div.textContent;
             }
             $(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);
             });
             });
             
             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 supprLien()
             {}
             function definirnumLien()
             {}
             /*function Lien(ite)
             {
             i=ite-1;
             var div = document.getElementById("commentaire");
             div.textContent = descrithem1[i];
             var text = div.textContent;
             }  */       
         <!-- Commencement de la galère
         window.onload = function () {
             getDOMImplementation('text.xml', getData);
         }
         
         function getData(oData) {
             DOMXML = oData;
             var series = oData.getElementsByTagName("serie");
             var sorted = [];
             for (var i=0, c=series.length; i<c; i++) {
                 if (series[i].getAttribute("editor")) {
                     sorted.push([series[i].getAttribute("name") + " &nbsp; (" + series[i].getAttribute("editor") + ")", i]);
                 } else {
                     sorted.push([series[i].getAttribute("name"), i]);
                 }
             }
             sorted.sort();    
             var list = "<select name=\"1\" id=\"1\">\n";
             for (var i=0, c=sorted.length; i<c; i++) {
                 list += "<option value=\"" + sorted[i][1] + "\">" + sorted[i][0] + "</option>\n";
             }
             list += "</select>\n";
             document.getElementById("outputListDiv").innerHTML = list;
         }
         
         function displayBD() {
             var idSerie = document.getElementById ("");
             var serie = DOMXML.getElementsByTagName("serie")[idSerie];
             var bds   = serie.getElementsByTagName("bd");
             var table = "<table class=\"sortable\" width=\"100%\">\n";    
             for (var i=0, c=bds.length; i<c; i++) {
             table += "<tr><td>" + bds[i].getAttribute("num") + "</td><td>" + bds[i].getAttribute("title") + "</td></tr>\n";
             }
             table += "</table>\n";
             document.getElementById("commentaires").innerHTML = table;
         }
      </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>

Voici ma page principale, beaucoup de fonction sont des tests que j'avais effectués ultérieurement pour savoir si ce que je faisais était tout simplement possible, au vu du résultat ce n'était pas très concluant.

L'endroit ou j'ai le plus possible besoin d'aide est à partir du commentaire "Commencement de la galère"

Ce code n'est pas de moi et je remercie d'abord chaleureusement Thunderseb, son auteur.

Et voici l'exemple qui a été donné :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="mep.css" rel="stylesheet" type="text/css" media="all" />
<title>Gestionnaire de BD</title>
<script type="text/javascript" src="oDOMImplementation.js"></script>
<script type="text/javascript">
<!--
var DOMXML = null;
window.onload = function () {
    getDOMImplementation('text.xml', getData);
}
 
function getData(oData) {
    DOMXML = oData;
    
    var series = oData.getElementsByTagName("serie");
    var sorted = [];
    
    // Classement par ordre alphabÃ©tique, via tableau Ã  2 dimensions
    for (var i=0, c=series.length; i<c; i++) {
        if (series[i].getAttribute("editor")) {
            sorted.push([series[i].getAttribute("name") + " &nbsp; (" + series[i].getAttribute("editor") + ")", i]);
        } else {
            sorted.push([series[i].getAttribute("name"), i]);
        }
    }
    sorted.sort();    
    
    // GÃ©nÃ©ration du SELECT
    var list = "<select name=\"serieName\" id=\"serieName\">\n";
    for (var i=0, c=sorted.length; i<c; i++) {
        list += "<option value=\"" + sorted[i][1] + "\">" + sorted[i][0] + "</option>\n";
    }
    
    list += "</select>\n";
    
    document.getElementById("outputListDiv").innerHTML = list;
    document.getElementById("nbBD").innerHTML = "(" + oData.getElementsByTagName("bd").length + " BD au total)";
}
 
function displayBD() {
    with (document.getElementById("serieName")) var idSerie = parseInt(options[selectedIndex].value);
    var serie = DOMXML.getElementsByTagName("serie")[idSerie];
    var bds   = serie.getElementsByTagName("bd");
    var table = "<table class=\"sortable\" width=\"100%\">\n";
    table += "<tr><th width=\"20\">NÂ°</th><th>Titre de l'album</th></td>\n";
    for (var i=0, c=bds.length; i<c; i++) {
        table += "<tr><td>" + bds[i].getAttribute("num") + "</td><td>" + bds[i].getAttribute("title") + "</td></tr>\n";
    }
    table += "</table>\n";
    document.getElementById("outputBDDiv").innerHTML = table;
}
//-->
</script>
<style type="text/css" media="screen">
    * { 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>
</head>
<body>
<h1><span class="float"></span>Techniques AJAX - DOMImplementation - Gestionnaire de BD</h1>
 
<fieldset>
    <legend>SÃ©lection de la sÃ©rie</legend>
    <form id="bdForm" method="get" action="">
        <div>
            <label for="serieName">Choisir une sÃ©rie : </label>
            <span id="outputListDiv"><em>Liste des sÃ©ries non chargÃ©e...</em></span>
        </div>
        <p><input type="button" value="Afficher les BD de cette sÃ©rie" onclick="displayBD();" /></p>
    </form>
</fieldset>
 
<fieldset id="outputBDFieldset">
    <legend>BD en ma possession</legend>
    <div id="outputBDDiv"></div>
</fieldset>
 
</body>
</html>

Et son fichier JS oDOMImplementation.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function getData(oData) {
        var author  = oData.getElementsByTagName('author')[0].firstChild.data;
        var country = oData.getElementsByTagName('country')[0].firstChild.data;
        var lang    = oData.getElementsByTagName('lang')[0].firstChild.data;
 
        alert(author + ' - ' + country + ' - ' + lang);
}
function getDOMImplementation(sUrl, fCallback) {
    var dom;
 
    if (window.ActiveXObject) {
        dom = new ActiveXObject("Microsoft.XMLDOM");
        dom.onreadystatechange = function() {
            if(dom.readyState == 4) {
                fCallback(dom);
            }
        };
    }
    else if (document.implementation && document.implementation.createDocument) {
        dom = document.implementation.createDocument("", "", null);
        dom.onload = function() {
            fCallback(dom);
        }
    }    
    else {
        alert("Votre navigateur ne gère pas l'importation de fichiers XML");
        return;
    }
 
    dom.load(sUrl);
}

Et enfin voilà le fichier text. XML pour récupérer les données (celui-ci à l'origine contenais des bds j'ai juste changé les title et les noms de série).

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0" encoding="utf-8"?>
<bds>
    <serie name="theme1">
        <bd num="1" title="nous sommes sur le lien 1" />
        <bd num="2" title="nous sommes sur le lien 2" />
        <bd num="3" title="nous sommes sur le lien 3" />    
        <bd num="4" title="nous sommes sur le lien 4" />
        <bd num="5" title="nous sommes sur le lien 5" />
        <bd num="6" title="nous sommes sur le lien 6" />
        <bd num="7" title="nous sommes sur le lien 7" />
    </serie>
 
    <serie name="theme2">
        <bd num="1" title="nous sommes sur le lien 1" />
        <bd num="2" title="nous sommes sur le lien 2" />
        <bd num="3" title="nous sommes sur le lien 3" />    
        <bd num="4" title="nous sommes sur le lien 4" />
        <bd num="5" title="nous sommes sur le lien 5" />
        <bd num="6" title="nous sommes sur le lien 6" />
        <bd num="7" title="nous sommes sur le lien 7" />    
    </serie>
 
    <serie name="theme3">
        <bd num="1" title="nous sommes sur le lien 1" />
        <bd num="2" title="nous sommes sur le lien 2" />
        <bd num="3" title="nous sommes sur le lien 3" />    
        <bd num="4" title="nous sommes sur le lien 4" />
        <bd num="5" title="nous sommes sur le lien 5" />
        <bd num="6" title="nous sommes sur le lien 6" />
        <bd num="7" title="nous sommes sur le lien 7" />
    </serie>
 
 
</bds>

Ce que j'aimerai savoir est : Y a t'il un moyen pour enregistrer des données depuis une fonction JS.

-Si vous avez une idée pour récupérer les données sur le XML pour les afficher sur ma page principale suivant les paramètre du thème sélectionné et du lien survolé.

-Si on peut mettre un nombre de lien modulable suivant le nombre d’occurrence sur le XML.

Si vous avez des réponses à mes questions, ou des idées à proposer merci de me les donné j'en serais vraiment ravi et surtout soulagé...

PS : c'est la première fois que j'écris sur l'un de vos forums, j'espère avoir tout bien expliqué.

Et voilà ce que m'a répondu l'un de mes anciens prof :

Il y a quelque point a faire attention...

- On n'a pas toujours le JDOM à utiliser. Il faut vérifier bien pour chaque langue qu'il a quel API pour lecture le ficher XML. Pour Javascript, on a pas vraiment le JDOM. On peut utiliser JDOM uniquement sur Internet Explorer. Sur Firefox et Chrome, il faut utiliser DOMParser ou XMLHttpRequest .

- Dans mon code, j'utilise XMLHttpRequest directement. Il lit le ficher XML et retourner un object de type XMLDocument immediatement. Ce type d'object est compatible avec ton function "getData".

- XMLHttpRequest accepte uniquement un URL pour le parametre. Donc, on a pas le droit de mettre juste le nom de fichier simple comme "test.xml" pour le parametre. Il faut mettre comme "http://127.0.0.1/test.xml". C'est a dire que tu dois telecharger tous les fichiers sur le serveur avant de tester. (Si t'as pas le serveur, Je te recommends d'installer le logiciel "XAMPP", il permettre de créer un serveur local sur ton ordinateur).

Dans tout les cas je vous remercie de votre lecture !