1. #1
    Futur Membre du Club
    Homme Profil pro
    Entrepreneur
    Inscrit en
    juillet 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Entrepreneur
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2017
    Messages : 6
    Points : 8
    Points
    8

    Par défaut [Ajax] Checker le changement d'un paragraphe actualisé en ajax

    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 ?

  2. #2
    Rédacteur/Modérateur
    Avatar de François DORIN
    Homme Profil pro
    Consultant informatique
    Inscrit en
    juillet 2016
    Messages
    1 157
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juillet 2016
    Messages : 1 157
    Points : 3 713
    Points
    3 713
    Billets dans le blog
    5

    Par défaut

    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.
    François DORIN
    Consultant informatique : conception, modélisation, développement (C#/.Net et SQL Server)
    Site internet | Profils Viadéo & LinkedIn
    ---------
    Page de cours : fdorin.developpez.com
    ---------
    N'oubliez pas de consulter la FAQ C# ainsi que les cours et tutoriels

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Entrepreneur
    Inscrit en
    juillet 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Entrepreneur
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2017
    Messages : 6
    Points : 8
    Points
    8

    Par défaut

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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 17/11/2014, 21h57
  2. Réponses: 2
    Dernier message: 24/07/2013, 10h59
  3. Réponses: 2
    Dernier message: 14/11/2012, 10h56
  4. [script.aculo.us] Ajax update n'est pas considéré comme une requete ajax
    Par Gregory.M dans le forum Bibliothèques & Frameworks
    Réponses: 0
    Dernier message: 08/06/2010, 11h35
  5. Récupérer $_POST actualisé par AJAX
    Par me-to-you93 dans le forum AJAX
    Réponses: 18
    Dernier message: 03/03/2008, 09h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo