JS ne fonctionne plus après .load()

**Spire_** · 22/10/2012, 16h55

Bonjour,

J'utilise setInterval et .load() pour rafraîchir une sorte de flux de conversations.
Cependant, à l'affichage des conversations, j'utilise .toggle() sur un bouton "Répondre" pour faire dérouler/masquer un textarea et un submit.

Mon setInterval est configuré à 3 secs. Lors de l'affichage de la page, le toggle() fonctionne, mais après 3 secs, le toggle() ne fonctionne plus, étant donné que j'appel la même page avec un selector.

Voici mon code (l'affichage est simplifié):

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
27
28
29
30
31
32
33
34
 
<div id="the_river_loading">
<?php
   $sql = 'SELECT firstname, lastname, text
            FROM users';
   $result = mysqli_query($mysqli, $sql);
 
   while ($data = mysqli_fetch_assoc($result))
   {
      echo '<div class="conversations">
              $firstname . ' ' . $lastname . '<br />' . $text . '<br /><br />
 
              <div class="btnAnswer_news">Répondre</div>
	      <form method="post" action="" style="display: none;">
	         <textarea name="answer_text"></textarea><br />
	         <input type="submit" name="answer_valid_id_' . $count . '" value="Poster" />
	      </form>
          </div>';
   }
?>
</div>
 
<script type="text/javascript">
 
$(".btnAnswer_news").click(function(){
   $(this).next().toggle("fast");
});
 
   var auto_refresh = setInterval(
      function() {
         $("#the_river_loading").fadeOut("slow").load("/home" + " #the_river_loading").fadeIn("slow");
      }, 3000
   );
</script>

Comment faire pour que le toggle fonctionne lui aussi après le .load() ? Pourquoi cela ne fonctionne pas actuellement ?

Au plaisir de vous lire.

Edit: Je viens de mettre la fonction du toggle() dans le callback de .load(), et ça fonctionne. Cependant si je déroule le toggle, 3 secs après sachant que le div est rechargé, le toggle remonte. Comment faire pour qu'il ne remonte pas ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
			$(".btnAnswer_news").click(function(){
				$(this).next().toggle("fast");
			});
 
var auto_refresh = setInterval(
   function() {
   $("#the_river_loading").load("/home" + " #the_river_loading", function() {
      $(".btnAnswer_news").click(function(){
         $(this).next().toggle("fast");
     });
  });
}, 3000);

**marcbuils** · 23/10/2012, 11h01

Bonjour Spire_,

Pour ton problème, je te conseillerais plutôt de générer des informations au format JSON et non en HTML coté PHP. Tu pourrais ainsi récupérer les informations et les afficher au format HTML via des systèmes de template comme mustache ou jquery.tmpl et ça te supprimerais le problème du bouton qui est rechargé à chaque fois.

L'autre solution est d'ajouter un identifiant sur tes boutons par rapport à la donnée affichée, comme ça tu peux avant chaque chargement enregistrer tous les formulaires cachés pour pouvoir les masquer après le chargement.

Ton code donnerais ainsi:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<div id="the_river_loading">
<?php
   $sql = 'SELECT id, firstname, lastname, text
            FROM users';
   $result = mysqli_query($mysqli, $sql);
 
   while ($data = mysqli_fetch_assoc($result))
   {
      echo '<div class="conversations">
              $firstname . ' ' . $lastname . '<br />' . $text . '<br /><br />
 
              <div data-id="$id" class="btnAnswer_news">Répondre</div>
	      <form method="post" action="" style="display: none;">
	         <textarea name="answer_text"></textarea><br />
	         <input type="submit" name="answer_valid_id_' . $count . '" value="Poster" />
	      </form>
          </div>';
   }
?>
</div>
 
<script type="text/javascript">
 
$(".btnAnswer_news").live(function(){ // ou .on pour les versions recente de jQuery
   $(this).next().toggle("fast");
});
 
   var auto_refresh = setInterval(
      function() {
         var _btnHides = [];
         $('#the_river_loading .btnAnswer_news:hidden').each(function(){
           _btnHides.push( $(this).attr('data-id') );
         });
         $("#the_river_loading").fadeOut("slow").load("/home" + " #the_river_loading", '', function(responseText, textStatus, XMLHttpRequest) {
            $.each(_btnHides, function(_i, _id){
              $('#the_river_loading .btnAnswer_news[data-id='+_id+']').hide();
            });
          }).fadeIn("slow");
      }, 3000
   );
</script>

@++,

Marc

**Spire_** · 23/10/2012, 12h04

Bonjour marcbuils,

Merci beaucoup pour ta réponse, étant débutant en JavaScript/jQuery je pense que la seconde méthode que tu proposes est la plus appropriée.

Cependant, lorsque je l'applique à mon code, le toggle remonte à chaque rechargement aussi. Pourquoi ?

**marcbuils** · 23/10/2012, 14h49

En effet, je n'ai pas fais attention que tu utilisais la fonction next.

Ce code devrait mieux fonctionner je pense (aux erreurs d'étourderies prè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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<div id="the_river_loading">
<?php
   $sql = 'SELECT id, firstname, lastname, text
            FROM users';
   $result = mysqli_query($mysqli, $sql);
 
   while ($data = mysqli_fetch_assoc($result))
   {
      echo '<div class="conversations">
              $firstname . ' ' . $lastname . '<br />' . $text . '<br /><br />
 
              <div class="btnAnswer_news">Répondre</div>
	      <form  data-id="$id" method="post" action="" style="display: none;">
	         <textarea name="answer_text"></textarea><br />
	         <input type="submit" name="answer_valid_id_' . $count . '" value="Poster" />
	      </form>
          </div>';
   }
?>
</div>
 
<script type="text/javascript">
 
$(".btnAnswer_news").live(function(){ // ou .on pour les versions recente de jQuery
   $(this).next().toggle("fast");
});
 
   var auto_refresh = setInterval(
      function() {
         var _formHidden = [];
         $('#the_river_loading form[data-id]:hidden').each(function(){
           _formHidden.push( $(this).attr('data-id') );
         });
         $("#the_river_loading").fadeOut("slow").load("/home" + " #the_river_loading", '', function(responseText, textStatus, XMLHttpRequest) {
            $.each(_formHidden, function(_i, _id){
              $('#the_river_loading form[data-id='+_id+']').hide();
            });
          }).fadeIn("slow");
      }, 3000
   );
</script>

Par contre j'ai écris ce code sans le testé, c'est donc uniquement un code à prendre pour exemple ; il y a probablement des petites erreurs qui se sont glissées dedans.

Bon code,

Marc

**Spire_** · 23/10/2012, 15h18

Mis à part le "click" manquant après le ".live(" je n'ai pas vu d'erreur, cependant la div générale se refresh toujours en "réinitialisant" le .toggle().

Je ne vois pas comment faire.

**marcbuils** · 23/10/2012, 16h01

C'est qu'il y a d'autres erreurs...
Le $id que j'ai ajouté n'est pas pris en compte coté PHP, d'ailleurs je viens de m'apercevoir qu'il correspond à ta variable $count.
Autre erreur, je n'avais pas vu que le formulaire était caché par défaut, et qu'il faut donc l'afficher, je faisais l'inverse.
J'ai également remplacé la fonction live par on, car la fonction live va disparaitre dans les prochaines versions de jQuery.

Ton code devient donc:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<div id="the_river_loading">
<?php
   $sql = 'SELECT firstname, lastname, text
            FROM users';
   $result = mysqli_query($mysqli, $sql);
 
   while ($data = mysqli_fetch_assoc($result))
   {
      echo '<div class="conversations">
              $firstname . ' ' . $lastname . '<br />' . $text . '<br /><br />
 
              <div class="btnAnswer_news">Répondre</div>
	      <form  data-id="' . $count . '" method="post" action="" style="display: none;">
	         <textarea name="answer_text"></textarea><br />
	         <input type="submit" name="answer_valid_id_' . $count . '" value="Poster" />
	      </form>
          </div>';
   }
?>
</div>
 
<script type="text/javascript">
 
$("#the_river_loading").on('click', '.btnAnswer_news', function(){
   $(this).next().toggle("fast");
});
 
   var auto_refresh = setInterval(
      function() {
         var _formHidden = [];
         $('#the_river_loading form[data-id]:visible').each(function(){
           _formHidden.push( $(this).attr('data-id') );
         });
         $("#the_river_loading").fadeOut("slow").load("/home" + " #the_river_loading", '', function(responseText, textStatus, XMLHttpRequest) {
            $.each(_formHidden, function(_i, _id){
              $('#the_river_loading form[data-id='+_id+']').show();
            });
          }).fadeIn("slow");
      }, 3000
   );
</script>

Pour infos, voici le test que j'ai essayé sur mon PC (et qui fonctionne):
Fichier test.php:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<!doctype>
<html>
<head>
<title>test</title>
<meta charset="utf8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div id="the_river_loading">
<?php
 $firstname = "marc";
$lastname = "toto";
$text="tutu";
$count=1; 
 $id = 1;
 
//   while ($data = mysqli_fetch_assoc($result))
   {
      echo '<div class="conversations">'.
              $firstname . ' ' . $lastname . '<br />' . $text . '<br /><br />
 
              <div class="btnAnswer_news">Répondre</div>
              <form  data-id="'.$id.'" method="post" action="" style="display: none;">
                 <textarea name="answer_text"></textarea><br />
                 <input type="submit" name="answer_valid_id_' . $count . '" value="Poster" />
              </form>
          </div>';
   }
?>
</div>
 
<script type="text/javascript">
 
$("#the_river_loading").on('click', '.btnAnswer_news', function(){
   $(this).next().toggle("fast");
});
 
   var auto_refresh = setInterval(
      function() {
         var _formHidden = [];
         $('#the_river_loading form[data-id]:visible').each(function(){
           _formHidden.push( $(this).attr('data-id') );
         });
         $("#the_river_loading").fadeOut("slow").load("test.html", '', function(responseText, textStatus, XMLHttpRequest) {
            $.each(_formHidden, function(_i, _id){
              $('#the_river_loading form[data-id='+_id+']').show();
            });
          }).fadeIn("slow");
      }, 3000
   );
</script>
</body>
</html>

Fichier test.html:

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
<div class="conversations">
              marc toto<br />tutu<br /><br />
 
              <div class="btnAnswer_news">Répondre</div>
	      <form  data-id="1" method="post" action="" style="display: none;">
	         <textarea name="answer_text"></textarea><br />
	         <input type="submit" name="answer_valid_id_1" value="Poster" />
	      </form>
          </div>
 
              marc2 toto2<br />tutu2<br /><br />
 
              <div class="btnAnswer_news">Répondre</div>
	      <form  data-id="2" method="post" action="" style="display: none;">
	         <textarea name="answer_text"></textarea><br />
	         <input type="submit" name="answer_valid_id_2" value="Poster" />
	      </form>
          </div>

Cette fois ça marche ?

JS ne fonctionne plus après .load() [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager