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

Version imprimable

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 :

Citation:

docXml is undefined

voici le 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
 
<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

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

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
<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>

20/09/2011, 18h35
NoSmoking

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.
21/09/2011, 11h28
Irokoi

Citation:

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 ?

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

concernant le

Citation:

Comment fait-on ?

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

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:

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:

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

21/09/2011, 21h19
Irokoi

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
21/09/2011, 23h00
NoSmoking

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

J'ai suivi tes consigne pourtant il me dit que

Citation:

data.titre is undefined

dans FireFox pourtant dans IE il trouve rien

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function readData(data) {
 
	var tTitre   = data.getElementsByTagName('titre');
	var tArtwork = data.getElementsByTagName('artwork');
	var tChemin  = data.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);
}

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
<script type="text/javascript">
window.onload = function (){
request(readData);
}
var data;
function request(callback) {
	var xhr = getXMLHttpRequest();
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseXML);
			data = xhr.responseXML;
		}
	};
	xhr.open("GET", "recup_images.php?nr=<?php echo $int_id_rubrique;?>", true);
	xhr.send(null);
 
}
 
var data = {
  nombre  : 0,  // on profites pour stocker le nombre a manipuler
  titre   : [],
  artwork : [],
  chemin : []  // IMPORTANT pas de virgule ici
}
 
function readData(data) {
 
	var tTitre   = data.getElementsByTagName('titre');
	var tArtwork = data.getElementsByTagName('artwork');
	var tChemin  = data.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);
}
	}
 
var compteur = <?php echo $int_id_image;?>;
 
	 function suivant()
	 {
		compteur++;
		if (compteur == data.getElementsByTagName('image').length) {
		compteur = 0;
		}
		afficheImage(compteur);
	 }
 
	 function precedent()
	 {
		compteur--;
		if (compteur < 0){
			compteur = data.getElementsByTagName('image').length-1;
		}
		afficheImage(compteur);
	 }
 
	function afficheImage(compteur){
  	document.getElementById('title').innerHTML = data.titre[compteur].childNodes[0].nodeValue;
  	document.getElementById('artwork').innerHTML = data.artwork[compteur].childNodes[0].nodeValue; 
  	document.getElementById('monImage').src = data.chemin[compteur].childNodes[0].nodeValue;
	// 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.onkeydown = function(e){
		 if (e.keyCode == 37)precedent();
		 if (e.keyCode == 39) suivant();
}
 
</script>

Edit
Je ne comprends pas il n'y a pas les mêmes erreurs sur IE et FF
dans IE il dit

Citation:

Cet objet ne gère pas cette propriété ou cette méthode

pour ça

Code:

var i; data.nombre = tTitre.length;

<PARENTHESE>
concernant le nota 2, voir post plus haut, autant ne pas en tenir compte, je ne trouve plus l'argumentaire pour cela, firstChild.data devant également faire l'affaire
</PARENTHESE>

Bon retour à ta façon de procéder dans la fonction readData, il mal venu de donner comme nom au paramètre le nom d'un variable existante, autant démarquer le nom
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function readData( param) { // RECUPERATION donees issues de param var tTitre = param.getElementsByTagName('titre'); var tArtwork = param.getElementsByTagName('artwork'); var tChemin = param.getElementsByTagName('chemin'); // INITIALISATION de l'objet data var i; data.nombre = tTitre.length; 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); } }
là c'est plus clair...

Dans ta fonction request, il ne faut pas initialiser data avec le retour de la requête, pour rappel data sans var devant est la variable globale
Code:

1 2 3 4 5 6 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { callback(xhr.responseXML); // data = xhr.responseXML; NE SERT A RIEN DANGER } };
au passage la première déclaration de data, ligne 5 de ton premier code, n'est pas nécessaire

Reprends la fonction afficheImage, en entier, que je t'ai proposé, data.titre[compteur].childNodes[0].nodeValue; ne veux plus rien dire maintenant.

Dans tes fonctions precedent et suivant, il te faut dorénavant utiliser data.nombre, data.getElementsByTagName('image').length-1; ne voulant également rien dire.