[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

**Irokoi** · 22/09/2011, 10h41

J'ai suivi tes consigne pourtant il me dit que

data.titre is undefined

dans FireFox pourtant dans IE il trouve rien

Code :

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

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 :

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

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

pour ça

Code :

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

var i; data.nombre = tTitre.length;

**NoSmoking** · 22/09/2011, 18h14

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

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

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 :

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

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.

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

AJAX

Discussions similaires

Partager

Partager