[AJAX] Fonction suivant précédent sur XML

**Irokoi** · 20/09/2011, 13h19

Bonjour, voilà je bloque sur une fonction suivant précédent pour changer d'image
et donc naviguer dans mon xml l'erreur est la suivante :

docXml is undefined

voici le code

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
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
 
<script type="text/javascript">
window.onload = function (){
request(readData);	
}
 
function request(callback) {
	var xhr = getXMLHttpRequest();
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseXML);
		}
	};
 
	xhr.open("GET", "recup_images.php?nr=<?php echo $int_id_rubrique;?>", true);
	xhr.send(null);
}
 
function readData(docXml) {
	var MaxNode = docXml.getElementsByTagName('place_image').length;
	//document.getElementById('spCompteur').innerHTML = MaxNode;
	// Attention quand je récupère un élément par TagName je récupère un tableau d'ou le titre[0].firstChild.nodeValue;
	var titre = docXml.getElementsByTagName('titre');
	document.getElementById('title').innerHTML = titre[<?php echo $int_id_image;?>].firstChild.nodeValue;
 
	var artwork = docXml.getElementsByTagName('artwork');
	document.getElementById('artwork').innerHTML = artwork[<?php echo $int_id_image;?>].firstChild.nodeValue;
 
	var chemin = docXml.getElementsByTagName('chemin');
	document.images["monImage"].src = chemin[<?php echo $int_id_image;?>].firstChild.nodeValue;
 
	}
 
var compteur = <?php echo $int_id_image;?>;
 
	 function suivant()
	 {
		compteur++;
		if (compteur == docXml.getElementsByTagName('image').length) {
		compteur = 0;
		}
		afficheImage(compteur);
	 }
 
	 function precedent()
	 {
		compteur--;
		if (compteur < 0){
			compteur = docXml.getElementsByTagName('image').length-1;
		}
		afficheImage(compteur);
	 }
 
	function afficheImage(compteur){
	var numero = parseInt(compteur);
	var chemin = docXml.getElementsByTagName('chemin');
	var titre = docXml.getElementsByTagName('titre');
	var artwork = docXml.getElementsByTagName('artwork');
 
	// Attention quand je récupère un élément par TagName je récupère un tableau d'ou le titre[compteur].firstChild.nodeValue;
 
	document.getElementById('title').innerHTML = titre[compteur].firstChild.nodeValue;
	document.getElementById('artwork').innerHTML = artwork[compteur].firstChild.nodeValue;
	document.images["monImage"].src = chemin[numero].firstChild.nodeValue;
	}
 
document.onkeydown = function(e){
		 if (e.keyCode == 37)precedent();
		 if (e.keyCode == 39) suivant();
}
</script>

J'avais l'idée de faire un returm docXml dans readData mais sans succès.
Si quelqu'un a une explication.

Merci

**Irokoi** · 20/09/2011, 18h29

var docXml; en global
et aussi docXml = xhr.responseXML;
dans la fonction request

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
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
<script type="text/javascript">
window.onload = function (){
request(readData);	
}
var docXml;
function request(callback) {
	var xhr = getXMLHttpRequest();
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseXML);
			docXml = xhr.responseXML;
		}
	};
	xhr.open("GET", "recup_images.php?nr=<?php echo $int_id_rubrique;?>", true);
	xhr.send(null);
 
}
 
function readData(docXml) {
 
	var MaxNode = docXml.getElementsByTagName('place_image').length;
	//document.getElementById('spCompteur').innerHTML = MaxNode;
	// Attention quand je récupère un élément par TagName je récupère un tableau d'ou le titre[0].firstChild.nodeValue;
	var titre = docXml.getElementsByTagName('titre');
	document.getElementById('title').innerHTML = titre[<?php echo $int_id_image;?>].firstChild.nodeValue;
 
	var artwork = docXml.getElementsByTagName('artwork');
	document.getElementById('artwork').innerHTML = artwork[<?php echo $int_id_image;?>].firstChild.nodeValue;
 
	var chemin = docXml.getElementsByTagName('chemin');
	document.images["monImage"].src = chemin[<?php echo $int_id_image;?>].firstChild.nodeValue;
 
	return docXml;
	}
 
var compteur = <?php echo $int_id_image;?>;
 
	 function suivant()
	 {
		compteur++;
		if (compteur == docXml.getElementsByTagName('image').length) {
		compteur = 0;
		}
		afficheImage(compteur);
	 }
 
	 function precedent()
	 {
		compteur--;
		if (compteur < 0){
			compteur = docXml.getElementsByTagName('image').length-1;
		}
		afficheImage(compteur);
	 }
 
	function afficheImage(compteur){
	var numero = parseInt(compteur);
	var chemin = docXml.getElementsByTagName('chemin');
	var titre = docXml.getElementsByTagName('titre');
	var artwork = docXml.getElementsByTagName('artwork');
 
	// Attention quand je récupère un élément par TagName je récupère un tableau d'ou le titre[compteur].firstChild.nodeValue;
 
	document.getElementById('title').innerHTML = titre[compteur].firstChild.nodeValue;
	document.getElementById('artwork').innerHTML = artwork[compteur].firstChild.nodeValue;
	document.images["monImage"].src = chemin[numero].firstChild.nodeValue;
	}
 
document.onkeydown = function(e){
		 if (e.keyCode == 37)precedent();
		 if (e.keyCode == 39) suivant();
}
 
document.getElementById('message').innerHTML = "Ton message";
 
// On l'efface 8 secondes plus tard
setTimeout(function() {
  document.getElementById('message').innerHTML = "";
},8000);
 
</script>

**NoSmoking** · 20/09/2011, 18h35

Bonjour,
dans ton code la variable docXml n'est à aucun moment déclarée, on la trouve comme paramètre à la fonction readData, donc locale.

Pour qu'elle soit visible, par les autres fonctions, il faut la définir en globale.

Coté méthode, tu aurais tout intérêt à récupérer toutes tes données XML dans un objet plutôt que de faire des docXml.getElementsByTagName à chaque appel de la fonction.

**Irokoi** · 21/09/2011, 11h28

Envoyé par NoSmoking

Coté méthode, tu aurais tout intérêt à récupérer toutes tes données XML dans un objet plutôt que de faire des docXml.getElementsByTagName à chaque appel de la fonction.

Comment fait-on ?

**NoSmoking** · 21/09/2011, 19h04

visiblement j'ai été long à répondre, croisement de message

concernant le

Comment fait-on ?

il te suffit de déclarer un objet en global, contenant des tableaux

Code :

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

1
2
3
4
5
6
var data = {
  nombre  : 0,  // on profites pour stocker le nombre a manipuler
  titre   : [],
  artwork : [],
  artwork : []  // IMPORTANT pas de virgule ici
}

ensuite dans une boucle tu mets en cache toutes les valeurs

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var tTitre   = docXml.getElementsByTagName('titre');
var tArtwork = docXml.getElementsByTagName('artwork');
var tChemin  = docXml.getElementsByTagName('chemin');
var i, data.nombre = tTitre.length;
// on suppute qu'il y a le meme nombre partout
 
for( i = 0; i < data.nombre; i++){
  data.titre.push  ( tTitre[i].childNodes[0].nodeValue);
  data.artwork.push( tArtwork[i].childNodes[0].nodeValue);
  data.chemin.push ( tChemin[i].childNodes[0].nodeValue);
}

toutes les données sont maintenant disponibles dans l'objet data
la fonction d'affichage peut ressembler à cela

Code :

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

1
2
3
4
5
function afficheImage(compteur){
  document.getElementById('title').innerHTML = data.titre[compteur];
  document.getElementById('artwork').innerHTML = data.artwork[compteur]; 
  document.getElementById('monImage').src = data.chemin[compteur];
}

voila pour le principe

nota : tu pourrais même mettre les objets obtenus, via le document.getElementById(), en "cache" dans l'objet data

nota 2 : il est préférable d'utiliser objet.childNodes[0].nodeValue plutôt que objet.firstChild.nodeValue

**Irokoi** · 21/09/2011, 21h19

J'étais en train d'angoissé sur le fait que mon site ne marche pas sur IE à cause d'une erreur Objet requis et efectivement dans un autre forum on me disait de ne pas utiliser firstChild.nodeValue.

Je testerai ça demain matin je vais voir si je peux me débrouiller pour le faire je posterai un message pour dire si ça marche ou pas

Merci en tout cas ça me sert de cours

**NoSmoking** · 21/09/2011, 23h00

à lire également http://javascript.developpez.com/faq...M#DOMIEFirefox

[AJAX] Fonction suivant précédent sur XML

AJAX

Vue hybride

Discussions similaires

Partager

Partager