R�cup�rer des donn�es et les traiter en XML avec javascript
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:
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") + " (" + 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:
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") + " (" + 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:
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:
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 :
Citation:
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 ! :)
