Checker le changement d'un paragraphe actualisé en ajax

Question

arbilus

15 Jul 2017 à 12:26

Bonjour, j'ai un soucis avec mon code. L'objectif de ce code est de charger le paragraphe "#tut_content" dans ma 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é.


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 :


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 ?
Modifié par arbilus (16 Jul 2017 - 15:09)

SolidSnake

17 Jul 2017 à 08:12

Bonjour,

arbilus a écrit :
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.

Tu as mis le doigt sur ton problème je pense.

La fonction load() et donc ajax() derrière récupère les données de manière asynchrone, et donc si tu veux récupérer ces données à la fin de la requête, tu dois utiliser la fonction callback de load():

$("#tut").load("php.php?tut=" + num_t, function() {
  tut_text = $("#tut_content").text()
})

arbilus

17 Jul 2017 à 09:00

J'ai trouvé la solution autrement qu'avec la fonction load. Mais en utilisant la fonction .get comme suit :

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

Cette solution ne vient pas de moi mais elle fonctionne très bien ! Apparemment d'après ce qu'il m'a dit utiliser .get au lieu de .load permet à la différence de .load de charger d'abord mon contenu puis ensuite, une fois que c'est fait (et non avant ou pendant, comme avec .load) de checker avec la condition tut_text = $("#tut_content" ).text();.

Du coup en m'inspirant de ce qu'il a fait et en choisissant de passer par un callback comme tu me l'as conseillé ça fonctionne aussi !

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

Donc voilà, ça fonctionne plutôt bien ces deux solutions Smiley smile

Modifié par arbilus (17 Jul 2017 - 09:16)

Sujet clos

JavaScript, DOM et API Web HTML5

Checker le changement d'un paragraphe actualisé en ajax