Discussion :

[arbilus]

Bonjour, j'ai un soucis avec mon code. L'objectif de ce code est de charger en ajax un paragraphe (#tut_content, situé dans la div #tut) via la fonction load_tut qui s'actualise toutes les 5 secondes pour mettre à jour le contenu automatiquement.

J'ai ensuite ajouté une fonction check_tut qui a pour but d'avertir si le texte du paragraphe "#tut_content" a été modifié.

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
 
function load_tut(){
			var num_t = $_GET('t');
			$("#tut").load("php.php?tut=" + num_t);
		}
 
		load_tut();
 
		var tut_text = $("#tut_content").text();
 
		function check_tut(){
			if($("#tut_content").text() != tut_text){ 
				alert('Le contenu vient d\'être changé !'); 
				tut_text = $("#tut_content").text(); 
			}
		}
 
		setInterval(function(){
			load_tut();
			check_tut();
		}, 5000);

Dans php.php :

Code :

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

1
2
3
4
5
6
7
8
9
if(isset($_GET['tut'])){
	$sqlh = "SELECT ..... FROM list WHERE .....
	$rsdh = mysqli_query($bd, $sqlh);
	$data = mysqli_fetch_array($rsdh);
	?>
	<p id="tut_content">
		<?php echo $data['.....']; ?>	
	</p>
	<?php

Le code fonctionne en partie : si je fais une modification sur la BDD directement pour changer le texte du paragraphe "#tut_content", j'ai bien l'alerte de modification qui se lance. Cependant le problème que j'ai c'est que, dès le chargement de la page, 5 secondes plus tard sans même avoir changé mon texte dans la BDD j'ai cette même alerte qui se lance (une fois seulement).

Le problème viendrait selon moi du fait qu'en relançant load_tut on va "recharger" le texte de mon paragraphe, qui ne deviendrait alors plus le même que celui définit dans tut_text (ce qui est étrange...), et que donc, la condtion $("#tut_content").text() != tut_text dans ma fonction check_tut serait respectée.

J'ai testé de mettre une alert(tut_text) après "var tut_text = $("#tut_content" ).text();" et il m'a ressorti une alerte vide. Alors que si je fais cette même alerte après "tut_text = $("#tut_content" ).text();" dans la fonction check_tut() il me ressort une alerte contenant bien le texte en question.

A croire que la var tut_text se définie avant le chargement du texte en ajax (via la fonction load_tut()) et que du coup elle considère que comme le texte n'existe pas, elle retourne du vide.

Je ne sais pas si je suis clair dans mes explications. Mais voilà, j'ai ce léger petit problème et je n'ai malheureusement pas trouvé de solution à ce problème ^^ . Des idées ?

[François DORIN]

Bonjour,

Plusieurs choses à noter.

Tout d'abord, tu initialises ta variable tut_text avec le contenu de #tut_content. Tu charges le contenu d'abord en le générant dans ton fichier php, puis ensuite tu le mets à jour via une requête Ajax. Mais s'il y a une différence, comme un espace, alors tu vas avoir une différence. Et là c'est le cas ! Il faudrait que ton fichier php soit ainsi

Code php :

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

1
2
3
4
5
6
7
if(isset($_GET['tut'])){
	$sqlh = "SELECT ..... FROM list WHERE .....
	$rsdh = mysqli_query($bd, $sqlh);
	$data = mysqli_fetch_array($rsdh);
	?>
	<p id="tut_content"><?php echo $data['.....']; ?></p>
	<?php

ou alors que tu trim ta variable et le texte de remplacement. Sachant qu'en plus, des problèmes liés à l'encodage peuvent venir perturber les comparaisons.

Ensuite, il faut se rappeler que le javascritp est un langage événementiel. Aussi, la fonction définie dans ton setInterval ne garantie pas que la fonction check_tut est appelée une fois load_tut terminée et le code html mis à jour (la seule chose sûre c'est que la requête de mise à jour est lancée avant check_tut). Il faudrait que tu utilises un callback au niveau de load_tut pour lancer check_tut une fois que la méthode $('#tut').load est terminée.

[arbilus]

Merci pour le conseil .

Je suis passé par un callback et ça fonctionne !

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
 
function load_tut(){
	var num_t = $_GET('t');
	$("#tut").load("php.php?tut=" + num_t, function() {
		if(first_load == 1) {
			tut_text = $("#tut_content" ).text();
			first_load = 0;
		}
 
	})	
}
 
function check_tut(){
	if($("#tut_content").text() != tut_text){ 
		alert('Le contenu vient d\'être changé !'); 
		tut_text = $("#tut_content").text(); 
	}
}
 
var first_load = 1;
load_tut();
 
setInterval(function(){
	load_tut();
	check_tut();
}, 5000);

Après ça fonctionne aussi comme ça (cette solution ne vient pas de moi), via un .get qui permet, selon ce qu'on m'a dit, d'exécuter la suite du code que une fois que le chargement du contenu via .get est un succès :

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
 
function load_tut() {
		   var num_t = $_GET('t');
		   $.get("php.php?tut=" + num_t, function(datas) {
			  $("#tut" ).html(datas);
			  if(first_load == 1) {
				 tut_text = $("#tut_content" ).text();
				 first_load = 0;
			  }
			  if($("#tut_content" ).text() != tut_text) {
				 alert("Le contenu vient d'être changé !" );
				 tut_text = $("#tut_content" ).text();
			  }
		   });
		}
		var first_load = 1;
		load_tut();
		setInterval(load_tut, 5000);

Voilà. Encore merci pour ton aide j'apprend un peu plus en js ^^ .