Actualisation automatique d'un bloc de contenu [Résolu]

[CinePhil]

Bonjour,

Je cherche le meilleur moyen d'actualiser automatiquement un petit classement "Top 5".

Ce classement est un tableau HTML affiché bien sûr dans une div.
Il y a en fait plusieurs classements (actuellement potentiellement 5) qui doivent s'afficher successivement toutes les X secondes.

J'ai construit une requête relativement complexe qui permet d'extraire tous les TOP 5 d'un coup, soit actuellement 25 lignes de 3 colonnes (+ 1 pour le nom du top 5) au maximum.

Mon idée est de donner à Javascript ce tableau classé de 25 lignes et de développer une fonction qui changerait le classement affiché périodiquement mais sans recharger les données depuis le serveur puisque toutes les données nécessaires sont extraites en une seule fois.

J'imagine qu'il faut encoder le tableau en JSon ?

Et ensuite ? Dois-je construire le tableau HTML en Javascript avec son contenu variable ?

Si par hasard vous connaissez un outil tout fait qui répond à ce besoin, je suis preneur.

[CinePhil]

J'ai déjà des petits soucis avec la lecture du JSON !

Le tableau de mes top 5 encodé en JSON donne cette chaîne :

{"1":{"2":{"pseudo":"azer","nb_rep":"12","best_time":"16483"},"1":{"pseudo":"jdupont","nb_rep":"12","best_time":"22001"},"3":{"pseudo":"test","nb_rep":"2","best_time":"24501"}}}

Et pour tester, j'ai créé une petite fonction Javascript :

Code :

1
2
3
4
function majTop5(jsonTop5)
{
	alert(jsonTop5.1.2.pseudo);
}

Firebug donne cette erreur :

missing ) after argument list

Pourtant la parenthèse fermante est bien là non ?

[rotrevrep]

bonsoir .
Déjà, petit problème dans la déclaration de ton objet, tu utilises des nombres ou des strings comme nom de variable. tes noms doivent être sans les doubles quotes, ce qui du coup t'oblige à utiliser des noms, et pas des nombres .

Code :

1
2
3
4
5
6
7
8
var json = {
a:{
	a:{pseudo:"azer",nb_rep:12,best_time:16483,position:1},
	b:{pseudo:"jdupont",nb_rep:12,best_time:22001,position:2},
	c:{pseudo:"test",nb_rep:2,best_time:24501,position:3}
    }
//j'ai rajouté "position" pour que tu puisses faire ton classement numérique :D
} ;

et comme tu souhaites mettre à jour ce tableau de classement, je te conseille de ne pas mettre tes nombres entre guillemets, ce qui te permet de comparer par les nombres . Tu n'auras plus ensuite qu'a changer la valeur de "position" dans chaque objet .

[CinePhil]

Merci pour ta réponse.
J'ai changé la génération du tableau et j'obtiens maintenant ceci en Json :

{"lot_1":{"joueur_2":{"pseudo":"azer","nb_rep":"12","best_time":"16483"},"joueur_1":{"pseudo":"jdupont","nb_rep":"12","best_time":"22001"},"joueur_3":{"pseudo":"test","nb_rep":"2","best_time":"24501"}}}

Ce qui fait qu'avec cette fonction test :

Code :

1
2
3
4
function majTop5(jsonTop5)
{
	alert(jsonTop5.lot_1.joueur_2.pseudo);
}

J'ai bien le premier pseudo en affichage.

Je cherche maintenant la meilleure méthode pour parcourir ce tableau Json en Javascript, à la manière d'un foreach de php.

EDIT :
J'ai essayé ceci mais rien ne s'affiche :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
function majTop5(jsonTop5)
{
	for (var i=0; i<jsonTop5.length; i++)
	{
		var lot = jsonTop5[i];
 
		for (var j=0; j<lot.length; j++)
		{
			var joueur = lot[j];
			alert(joueur.pseudo);
		}
	}
}

[NoSmoking]

Bonsoir,
tu peux utiliser for...in pour la boucle
exemple :

Code :

1
2
3
4
5
6
7
8
9
for( var i in data){
  document.write( i /*, ' : ', data[i]*/);
  for( var j in data[i]){
    document.write( '--', j , ' : ', /*+data[i][j], */ '<br>');
    for( var k in data[i][j]){
      document.write( '----', k, ' : ', data[i][j][k], '<br>');
    }
  }
}

avec data indenté

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var data =
{
  "lot_1": {
    "joueur_2": {
      "pseudo": "azer",
      "nb_rep": "12",
      "best_time": "16483"
    },
    "joueur_1": {
      "pseudo": "jdupont",
      "nb_rep": "12",
      "best_time": "22001"
    },
    "joueur_3": {
      "pseudo": "test",
      "nb_rep": "2",
      "best_time": "24501"
    }
  }
};

PS : le document.write est la pour montrer le résultat

[CinePhil]

Oui effectivement j'y suis arrivé avec for in.

Il me reste à faire la fonction qui génère le HTML du tableau du top 5 et la fonction qui va mettre à jour ce top 5 en bouclant sur chaque top 5 du tableau (pour le moment, il n'y en a qu'un mais il y en aura plusieurs).

Encore merci pour ton aide.

EDIT :

Pour le moment, j'en suis à cette fonction dans mon fichier Javascript :

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
function majTop5(jsonTop5, lot_id, type_lot)
{
	var lot = jsonTop5.lot_id;
	var rank = 0;
 
	var contenuHTML = '<table class="table_top_membres">\n';
 
	for (var j in lot)
	{
		var joueur = lot[j];
		rank ++;
 
		contenuHTML += '<tr class="tr_membre_top">\n';
		contenuHTML += 	'<td class="td_top_pseudo">' + rank + joueur.pseudo + '</td>\n';
		contenuHTML += 	'<td class="td_top_result">' + joueur.best_time + '</td>\n';
		contenuHTML += 	'<td class="td_top_result">' + joueur.nb_rep + '</td>\n';
		contenuHTML += '</tr>\n';
	}
 
	contenuHTML += '</table>\n';
 
	document.getElementById("top_type_lot").innerHTML = type_lot;
	document.getElementById("top_membres").innerHTML = contenuHTML;
}

Et dans ma vue phtml, j'ai inséré ce bout de Javascript pour au moins tester :

Code :

1
2
3
4
5
6
7
8
<script type="text/javascript">
				window.onload=function()
				{
					setInterval('majTop5(<?php echo $jsonTop5.", \'lot_1\', \'un type lot\'"; ?>)',10000);
				}; 
			</script>
			<div id="top_membres">
			</div>

Lorsque j'avais encore des erreurs de syntaxe, je constatais que l'erreur ne s'affichait dans Firebug qu'au bout de 10 secondes.
Maintenant, je n'ai plus d'erreur mais le top 5 ne s'affiche pas.

EDIT 2 :
Le problème ci-dessus semble dû au fait que lot_id n'est pas interprété comme une variable dans l'expression :

Code :

var lot = jsonTop5.lot_id;

En remplaçant lot_id par sa valeur (une seule pour le moment), le top5 s'affiche.
J'ai essayé, rapidement vu l'heure tardive, cette syntaxe pour avoir la variable mais ça ne fonctionne pas :

Code :

var lot = jsonTop5 + '.' + lot_id;

[CinePhil]

Je suis proche du but !

J'ai ajouté des données pour avoir un second top 5 à afficher :

{"lot_1":{"type_lot":"type_lot_1","joueur_2":{"pseudo":"azer","nb_rep":"12","best_time":"16483"},"joueur_1":{"pseudo":"jdupont","nb_rep":"12","best_time":"22001"},"joueur_3":{"pseudo":"test","nb_rep":"2","best_time":"24501"}},"lot_9":{"type_lot":"type_lot_2","joueur_3":{"pseudo":"test","nb_rep":"12","best_time":"10452"},"joueur_1":{"pseudo":"jdupont","nb_rep":"12","best_time":"11548"},"joueur_4":{"pseudo":"sdup","nb_rep":"12","best_time":"12345"},"joueur_5":{"pseudo":"testtest","nb_rep":"11","best_time":"10456"}}}

Dans le fichier Javascript :

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
function majTop5(jsonTop5)
{
	for (var i in jsonTop5)
	{
		// Pour chaque lot
		var lot = jsonTop5[i];
		var type_lot = lot.type_lot;
		var rank = 0;
 
		var contenuHTML = '<table class="table_top_membres">\n';
 
		for (var j in lot)
		{
			if(!(j == 'type_lot')) // On passe le type_lot
			{
				var joueur = lot[j];
				rank ++;
 
				contenuHTML += '<tr class="tr_membre_top">\n';
				contenuHTML += 	'<td class="td_top_pseudo">' + rank + '. ' + joueur.pseudo + '</td>\n';
				contenuHTML += 	'<td class="td_top_result">' + joueur.best_time + '</td>\n';
				contenuHTML += 	'<td class="td_top_result">' + joueur.nb_rep + '</td>\n';
				contenuHTML += '</tr>\n';
			} // Fin if(!(j == 0))
		} // Fin for (var j in lot)
 
		contenuHTML += '</table>\n';
 
		document.getElementById("top_type_lot").innerHTML = type_lot;
		document.getElementById("top_membres").innerHTML = contenuHTML;
 
		// Temporisation
		setTimeout('var toto = 0;', 10000);
	} // Fin for (var i in jsonTop5)
} // Fin function majTop5(jsonTop5)

Dans la vue phtml :

Code :

1
2
3
4
5
6
<script type="text/javascript">
window.onload=function()
{
    majTop5(<?php echo $jsonTop5; ?>);
}
</script>

Problème : la temporisation de 10 secondes entre chaque lot ne fonctionne pas.
En mettant une alert(i) je vois bien les deux lots se succéder mais sans l'alerte ça semble afficher directement le dernier lot sans attendre 10 secondes entre les deux.

J'ai compris qu'en fait, setTimeout n'interrompt pas l'éxécution du script en cours ; c'est seulement un temps d'attente pour exécuter le code à l'intérieur de la fonction setTimeout.

Comment alors faire pour que la boucle sur les lots s'interrompe pendant 10 secondes entre chaque lot ?

[rotrevrep]

tu devrais essayer :

Code :

setInterval("function()",time);

[CinePhil]

J'ai essayé diverses choses, y compris avec setInterval mais cela semble le même problème : le script qui contient setTimeout ou setInterval n'est pas interrompu par cette instruction ; c'est seulement le code figurant à l'intérieur de setXXX ou la fonction lancée par setXXX qui voit son exécution retardée.

En gros, ce que j'ai constaté et compris :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
for ( x in toto)
{
    setTimeout("function()", time); 
/* décale l'exécution de function() de time millisecondes
 mais le code ci-dessous est exécuté immédiatement 
sans attendre l'exécution de function() */
 
    // du code Javascript
 
    setInterval("function()", time); 
/* décale la première exécution de function() de time millisecondes puis la réexécute toutes les time millisecondes
 mais le code ci-dessous est exécuté immédiatement 
sans attendre l'exécution de function() */
 
// du code Javascript
 
/* l'itération suivante du for s'exécute sans attendre les exécutions retardées des function() */
 
}

[CinePhil]

J'ai fini par y arriver !

J'ai maintenant dans mon fichier Javascript deux fonctions.
La première crée, à partir du json, un tableau Javascript des lots :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function tableauLots(jsonTop5)
{
	var tabLots = Array;
	var indiceLot = 0;
 
	for (var i in jsonTop5)
	{
		tabLots[indiceLot] = jsonTop5[i];
		indiceLot ++;
	}
 
	indiceLot = 0;
	genereTop5(tabLots, indiceLot);
}

Elle se termine en lançant la seconde fonction qui génère le tableau HTML du top 5 et qui se répète tant qu'il y a des lots :

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
function genereTop5(tabLots, indiceLot)
{
	var rank = 0;
	var contenuHTML = '<table class="table_top_membres">\n';
 
	for (var j in tabLots[indiceLot])
	{
		if(j == 'type_lot')
		{
			var type_lot = tabLots[indiceLot][j];
		}
		else
		{
			var joueur = tabLots[indiceLot][j];
			rank ++;
 
			contenuHTML += '<tr class="tr_membre_top">\n';
			contenuHTML += 	'<td class="td_top_pseudo">' + rank + '. ' + joueur.pseudo + '</td>\n';
			contenuHTML += 	'<td class="td_top_result">' + joueur.best_time + '</td>\n';
			contenuHTML += 	'<td class="td_top_result">' + joueur.nb_rep + '</td>\n';
			contenuHTML += '</tr>\n';
		} // Fin if(!(j == 0))
	} // Fin for (var j in lot[indiceLot])
 
	contenuHTML += '</table>\n';
 
	document.getElementById("top_type_lot").innerHTML = type_lot;
	document.getElementById("top_membres").innerHTML = contenuHTML;
 
	indiceLot ++;
 
	if (indiceLot <= tabLots.length)
	{
		setTimeout(function(){genereTop5(tabLots, indiceLot);}, 10000);
	}
 
}

Nota : Chose bizarre, mon json actuel génère un tableau de deux lots mais l'affichage de tabLots.length donne 1 c'est à dire non pas le nombre d'éléments du tableau mais l'indice maxi !

Dans la vue phtml, je fais maintenant ceci :

Code :

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
				window.onload=function()
				{
					var jsonTop5 = <?php echo $jsonTop5; ?>;
					var delai = <?php echo count($top5); ?> * 10000;
					tableauLots(jsonTop5);
					setInterval(function(){tableauLots(jsonTop5);}, delai);
				} 
			</script>

Je lance immédiatement la mécanique puis je la répète en ajustant le délai au nombre de tops 5 à afficher successivement.

Avec ce code, les tops 5 actuels se succèdent à l'écran toutes les 10 secondes.