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

Checker le changement d'un paragraphe actualisé en ajax [Ajax] - Javascript/Node.js - Programmation

Marsh Posté le 15-07-2017 à 12:23:04    

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

Code :
  1. function load_tut(){
  2.   var num_t = $_GET('t');
  3.   $("#tut" ).load("php.php?tut=" + num_t);
  4.  }
  5.  load_tut();
  6.  var tut_text = $("#tut_content" ).text();
  7.  function check_tut(){
  8.   if($("#tut_content" ).text() != tut_text){
  9.    alert('Le contenu vient d\'être changé !');
  10.    tut_text = $("#tut_content" ).text();
  11.   }
  12.  }
  13.  setInterval(function(){
  14.   load_tut();
  15.   check_tut();
  16.  }, 5000);


 
Dans php.php :  

Code :
  1. if(isset($_GET['tut'])){
  2. $sqlh = "SELECT ..... FROM list WHERE .....
  3. $rsdh = mysqli_query($bd, $sqlh);
  4. $data = mysqli_fetch_array($rsdh);
  5. ?>
  6. <p id="tut_content">
  7.  <?php echo $data['.....']; ?>
  8. </p>
  9. <?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).
 
Si je relis bien le code, logiquement dans un premier temps on va lancer load_tut(); (la fonction qui charge le contenu dans ma div). Puis on va définir la variable tut_text comme étant le texte de mon paragraphe. Ensuite, 5 secondes plus tard, on va relancer load_tut pour recharger mon paragraphe, puis on va lancer le check de changement du paragraphe avec check_tut().  
 
Le problème viendrait donc 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.  
 
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é d'explication à ce mystère ^^ . Des idées ?

Reply

Marsh Posté le 15-07-2017 à 12:23:04   

Reply

Marsh Posté le 15-07-2017 à 14:48:18    

Salut,
 
Si le problème ne se présente qu'une fois alors je pencherai vers un problème de portée de ta variable déclarée au début :
 

Code :
  1. var tut_text = $("#tut_content" ).text();


 
Essaye de la déclarer en globale voir si ça change.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 15-07-2017 à 15:51:02    

Merci pour ta réponse. Il me semblait que cette variable était déjà globale étant donné qu'elle est écrite en dehors d'une fonction avec var (comme j'ai pu le vérifier ici aussi : https://stackoverflow.com/questions [...] web-page).

Reply

Marsh Posté le 15-07-2017 à 16:08:58    

Tant qu'il y a "var" devant ça ne sera jamais vraiment globale. De la façon dont tu me montres le code ça devrait avoir la portée suffisante mais comme beaucoup de choses sont coupées dans ce que tu affiches on ne sait jamais.
Tu as fait le test?


Message édité par MaybeEijOrNot le 15-07-2017 à 16:11:25

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 16-07-2017 à 11:47:31    

Du coup j'ai enlèvé var mais ça ne change rien, toujours le même problème ^^'.
 
Par contre 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 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.


Message édité par arbilus le 16-07-2017 à 11:48:31
Reply

Marsh Posté le 16-07-2017 à 15:09:02    

Oui elle est définie pendant que la requête s’exécute (et donc avant qu'elle soit terminée), il faut attendre ton callback "success" pour pouvoir ajouter les données. Je ne connais pas trop jQuery mais je sais qu'il le fait tout seul, seulement là tu veux exécuter une autre commande en plus de récupérer le contenu de la requête.
 
.load() permet en effet l'appel d'une fonction lorsque l’exécution de la requête est terminée (qu'elle ai réussi ou non apparemment). Tu as .get() apparemment qui fait pareil mais uniquement en cas de succès.
 


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 16-07-2017 à 16:17:06    

Du coup j'ai remplacé l'intégralité de ma fonction load_tut par un .get() comme ceci :  
 

Code :
  1. function load_tut(){
  2. var num_t = $_GET('t');
  3. jQuery.get('php.php?tut=' + num_t, {
  4. type: 'GET',
  5. dataType: 'html'
  6. }).done(function (response) {
  7.     $('#tut').html(response);
  8. });


 
Cela m'affiche bien mon texte, mais le problème est toujours là ^^ . Le message d'alerte s'affiche une fois en chargement de page, encore et toujours.  
 
J'ai aussi essayé avec un jQuery.ajax() mais same problème.  
 
Mystère...  :pt1cable:


Message édité par arbilus le 16-07-2017 à 16:18:53
Reply

Marsh Posté le 16-07-2017 à 17:10:44    

Non mais si tu remplaces :
 

Code :
  1. function load_tut(){
  2.  var num_t = $_GET('t');
  3.  $("#tut" ).load("php.php?tut=" + num_t);
  4. }
  5. load_tut();
  6. var tut_text = $("#tut_content" ).text();


 
par :
 

Code :
  1. function load_tut() {
  2.  var num_t = $_GET('t');
  3.  $.get("php.php?tut=" + num_t, function (datas) {
  4.    $("#tut" ).html(datas);
  5.    tut_text = $("#tut_content" ).text();
  6.  });
  7. }
  8. load_tut();


 
Mais bon là faut aussi appeler ta fonction check_tut() qu'une fois que cette requête est terminée, autrement tu vas lancer ta fonction avant que la variable ne soit déclarée.
 
Non parce que je ne connais pas trop jQuery mais je ne sais pas trop non plus ce que tu as fait, déjà ça me semble bizarre de faire un .get() et de devoir préciser que c'est une requête de type GET...


Message édité par MaybeEijOrNot le 16-07-2017 à 17:13:44

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 16-07-2017 à 17:33:24    

Du coup, sans pouvoir tester moi-même, un truc du genre :
 

Code :
  1. function load_tut() {
  2.   var num_t = $_GET('t');
  3.   $.get("php.php?tut=" + num_t, function(datas) {
  4.      $("#tut" ).html(datas);
  5.      if(first_load == 1) {
  6.         var tut_text = $("#tut_content" ).text();
  7.         first_load = 0;
  8.      }
  9.      if($("#tut_content" ).text() != tut_text) {
  10.         alert("Le contenu vient d'être changé !" );
  11.         var tut_text = $("#tut_content" ).text();
  12.      }
  13.   });
  14. }
  15. var first_load = 1;
  16. load_tut();
  17. setInterval(load_tut, 5000);


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 16-07-2017 à 20:11:45    

Malheureusement ce n'est toujours pas bon, ça me met le message d'alerte en boucle toutes les 5 secondes, même sans changer le texte.  
 
Je continues de chercher ! Pas facile à résoudre comme problème.

Reply

Marsh Posté le 16-07-2017 à 20:11:45   

Reply

Marsh Posté le 16-07-2017 à 22:40:20    

Oui là c'est moi qui me fait piéger par la portée des variables. :o  
 

Code :
  1. function load_tut() {
  2.   var num_t = $_GET('t');
  3.   $.get("php.php?tut=" + num_t, function(datas) {
  4.      $("#tut" ).html(datas);
  5.      if(first_load == 1) {
  6.         tut_text = $("#tut_content" ).text();
  7.         first_load = 0;
  8.      }
  9.      if($("#tut_content" ).text() != tut_text) {
  10.         alert("Le contenu vient d'être changé !" );
  11.         tut_text = $("#tut_content" ).text();
  12.      }
  13.   });
  14. }
  15. var first_load = 1;
  16. load_tut();
  17. setInterval(load_tut, 5000);


 
Si ça fonctionne comme ça et que tu veux des variables locales, il faudra passer par une fonction récursive qui prendra en paramètres les variables.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 17-07-2017 à 02:25:35    

Incroyable :D . Vraiment c'est top. Cela fonctionne à merveille ! Je ne sais pas comment tu as fait mais je vais me pencher sur la portée des variables que je maîtrise pas du tout et sur ton code et essayer de bien l'assimiler. Encore merci à toi !! :)


Message édité par arbilus le 17-07-2017 à 02:38:33
Reply

Marsh Posté le 17-07-2017 à 09:21:58    

Après une autre solution qui fonctionne aussi, que je partage, via un .load :  
 

Code :
  1. function load_tut(){
  2. var num_t = $_GET('t');
  3. $("#tut" ).load("php.php?tut=" + num_t, function() {
  4.  if(first_load == 1) {
  5.   tut_text = $("#tut_content" ).text();
  6.   first_load = 0;
  7.  }
  8. })
  9. }
  10. function check_tut(){
  11. if($("#tut_content" ).text() != tut_text){
  12.  alert('Le contenu vient d\'être changé !');
  13.  tut_text = $("#tut_content" ).text();
  14. }
  15. }
  16. var first_load = 1;
  17. load_tut();
  18. setInterval(function(){
  19. load_tut();
  20. check_tut();
  21. }, 5000);

Reply

Marsh Posté le 17-07-2017 à 11:15:56    

Oui le .load fonctionne seulement la fonction n'est pas exécutée exactement dans le même cas.
Dans le .load la fonction est exécutée une fois la requête terminée et dans le .get la fonction est exécutée que si la requête a réussi. Enfin c'est ce que je comprends de ces descriptions :
http://api.jquery.com/load/
http://api.jquery.com/jquery.get/
 
Il y a donc une légère différence.
 
Et autrement mon code ne fait qu'attendre que la requête ajax soit terminée pour exécuter le reste. Bon j'ai tout mis dans une même fonction parce que j'étais parti sur l'idée de garder la portée locale des variables et de passer sur une fonction récursive mais en fin de compte je me suis dit que je n'allais pas te changer tout le code et par la même occasion j'ai oublié de virer la portée locale de mes variables. :o  
Donc le problème à la base ce n'était pas la portée des variables (qui était bien gérée) mais bien le fait que ton code continue à s'exécuter pendant que la requête est en cours, et donc tu déclarais ta variable avant que la réponse de la requête ne soit revenue. Après si tu ne te sents pas au point sur la portée des variables tu peux toujours y rejeter un coup d'oeil.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 17-07-2017 à 14:06:43    

Yep, j'vais voir ça sur la portée des variables c'est pas un truc que je comprend totalement. Je vois comment t'as procédé au moins ^^ . En tout cas merci pour ton aide, ça m'avance beaucoup.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed