Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1297 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2303404
arbilus
Posté le 15-07-2017 à 12:23:04  profilanswer
 

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 ?

mood
Publicité
Posté le 15-07-2017 à 12:23:04  profilanswer
 

n°2303409
MaybeEijOr​Not
but someone at least
Posté le 15-07-2017 à 14:48:18  profilanswer
 

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.
n°2303410
arbilus
Posté le 15-07-2017 à 15:51:02  profilanswer
 

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

n°2303411
MaybeEijOr​Not
but someone at least
Posté le 15-07-2017 à 16:08:58  profilanswer
 

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.
n°2303424
arbilus
Posté le 16-07-2017 à 11:47:31  profilanswer
 

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
n°2303432
MaybeEijOr​Not
but someone at least
Posté le 16-07-2017 à 15:09:02  profilanswer
 

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.
n°2303436
arbilus
Posté le 16-07-2017 à 16:17:06  profilanswer
 

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
n°2303437
MaybeEijOr​Not
but someone at least
Posté le 16-07-2017 à 17:10:44  profilanswer
 

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.
n°2303438
MaybeEijOr​Not
but someone at least
Posté le 16-07-2017 à 17:33:24  profilanswer
 

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.
n°2303445
arbilus
Posté le 16-07-2017 à 20:11:45  profilanswer
 

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.

mood
Publicité
Posté le 16-07-2017 à 20:11:45  profilanswer
 

n°2303449
MaybeEijOr​Not
but someone at least
Posté le 16-07-2017 à 22:40:20  profilanswer
 

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.
n°2303453
arbilus
Posté le 17-07-2017 à 02:25:35  profilanswer
 

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
n°2303456
arbilus
Posté le 17-07-2017 à 09:21:58  profilanswer
 

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

n°2303462
MaybeEijOr​Not
but someone at least
Posté le 17-07-2017 à 11:15:56  profilanswer
 

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.
n°2303476
arbilus
Posté le 17-07-2017 à 14:06:43  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

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

 

Sujets relatifs
Excel: étirer ma formule avec un changement d'ongletpb sauts de ligne $.ajax
Probleme AJAX et JEE/servletchangement de font-family de texte selectionné
Supprimez le fichier image uploded utilisant le code d'ajaxafficher des images au fur et à mesure d'un appel ajax
Fonction "effacer contenu sur changement" sur 2 cellulesAjax - xmlhttprequest - Problème pour lancer deux fonctions
Système de commentaire sur liste en PHP/AJAXSouci pour exécuter fonction ajax au chargement de la page
Plus de sujets relatifs à : [Ajax] Checker le changement d'un paragraphe actualisé en ajax



Copyright © 1997-2016 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR