Discussion :

[Phpx1]

Bonjour,

Je continue mon application (Gestion de livres) avec l'affichage de mes 2 tableaux sur la même page

• le premier listant les titres de livres ( NumLiv, Titre, Année,...)
• le second listant tous les chapitres du livre sélectionné dans le 1er tableau.

La sélection se fait donc en cliquant sur une ligne du 1er tableau (colorise la ligne) et doit donc mettre à jour le second tableau avec les infos récupérées en BDD.

Pour ce faire, j'ai un script (list-PILO) comprenant du J.S qui suite à l'évenement onclick sur une ligne du 1er tableau colorise cette dernière puis va récupérer le NumLiv (N° du livre affiché ds le 1er tableau) pour passer en paramètre cette info afin d'appeler le script listchap-JSON.php qui permettra de faire cette jointure avec l'autre table (CHAP)
(Par défaut, (au chargement de la page) j'ai mis dans mon code que la 1ère ligne (NumLiv=1) (Tab LIV) soit toujours sélectionnée et de ce fait, j'ai bien dans mon tableau (CHAP) l'affichage de la liste des chapitres
correspondants (tout ceci fonctionne bien...) )

mais là où il y a un problème (j'y arrive...;-)) ) c'est que si je clique sur une autre ligne (et quelque soit la ligne) , il m'affiche toujours les chapitres du NumLiv=1, c'est comme si

var numliv = $(this).find('#NumLiv').html(); était toujours égal à 1 (Et c'est bien le cas car en faisant un console.log(numliv) : c'est toujours égal à 1 )

Je vous ai joint que la partie JS (car à priori c'est à ce niveau que se situe le problème...???)
Rem: pour la suite du traitement, pas d'erreur particulière.
(au retour du JSON), j'ai bien les log affichés (mon tableau rempli (data) + "MAJ après tableau")

Je ne vois vraiment pas où se situe le problème ????
Merci d'avance pour vos remarques ou solutions ;-))

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
55
56
57
58
59
60
61
62
63
64
<script type="text/javascript">
 
/////     -------------------------------------------------------
/////   APPEL FONCTION lineClicked ( Affichage Tableau CHAP)
/////     -------------------------------------------------------
 
 
         function lineClicked(){
 
             $('.scrolldown tr').removeClass('lignecoloree lignenormale');
 
              $(this).addClass('lignecoloree');     // Rajoute la classe sur la ligne cliquee
           }
 
 
         $(document).ready(function(){
 
 
                 $('.scrolldown tbody').on('click','tr',lineClicked);
 
 
                 var numliv = $(this).find('#NumLiv').html();  // Récupére la valeur de la cellule
 
 
                 console.log("numliv "+numliv);
 
 
                  $.ajax({
                         type: 'POST',
                         url: 'listchap-JSON.php',
                         data: 'num=' +numliv,
                         datatype: 'json',
 
 
                         success:function(data){
 
		         console.log("ret data "+data); 
 
                          $.each(data.listchap, function(index,valeur){
                              $("#ligneschap").append("<tr>"    
                                                 +"<td>" +valeur.chapitre+ "</td>"
                                                 +"<td>" +valeur.avion+    "</td>"
                                                 +"<td>" +valeur.date+     "</td>"
                                                 +"<td>" +valeur.pays+     "</td>"
                                                 +"<td>" +valeur.cie+      "</td>"
                                                 +"<td>" +valeur.comment+  "</td>"
                                                 +"</tr>");
                         });
 
			 console.log("APRES MAJ TABLEAU");
 
                         },
 
 
                        error:function(data)
                         { 
                          console.log("ERROR");
                         }  
 
                    });
           });
 
 
      </script>

[Toufik83]

Salut,

Normal que ça renvoi toujours "1" vu que tu l'initialise seulement au chargement de page, si tu veux récupérer sa valeur lors d'un clic sur le <tr> il va falloir le faire aussi dans la fonction lineClicked().

Et ça vient d'ou ce var numliv = $('#NumLiv').html(); ? est-ce le id du <tr> sur lequel tu cliques ?

[Invité]

Bonjour,

1- le code JS n'a d'intérêt qu'avec le code HTML associé (au moins un extrait, nécessaire et suffisant)

2- et à priori, tout le code (récupération + Ajax) doit être mis DANS la fonction lineClicked().
On peut aussi utiliser une autre fonction :

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
// --------
function lineClicked(elt)
{
	$('.scrolldown tr').removeClass('lignecoloree lignenormale');
	elt.addClass('lignecoloree');     // Rajoute la classe sur la ligne cliquee
}
// --------
function getListChap(elt)
{
	var numliv = elt.find('#NumLiv').html();  // Récupére la valeur de la cellule
	console.log("numliv "+numliv);
	$.ajax({
		type: 'POST',
		url: 'listchap-JSON.php',
		data: 'num=' +numliv,
		datatype: 'json',
 
		success:function(data){
			console.log("ret data "+data); 
			$.each(data.listchap, function(index,valeur){
				$("#ligneschap").append("<tr>"    
					+"<td>" +valeur.chapitre+ "</td>"
					+"<td>" +valeur.avion+    "</td>"
					+"<td>" +valeur.date+     "</td>"
					+"<td>" +valeur.pays+     "</td>"
					+"<td>" +valeur.cie+      "</td>"
					+"<td>" +valeur.comment+  "</td>"
					+"</tr>");
			});
			console.log("APRES MAJ TABLEAU");
		},
		error:function(data)
		{ 
			console.log("ERROR");
		}  
	});
}
// --------
$(document).ready(function(){
	$('.scrolldown tbody').on('click', 'tr', function(){
		lineClicked($(this));
		getListChap($(this));
	});
});

[Phpx1]

Bonjour,

Merci pour vos réponses !!

Je n'avais pas mis la partie HTML car je pensais que le pb se situait au niveau du J.S (mais apparemment c'est bien le cas).
Je vous ai joint tout de même cette partie (boucle pour récupérer les données , coloriser par défaut la 1ère ligne et récupérer le numlivre pour jointure avec l'autre table pour charger les chapitres (que je n'ai pas mis) )
Le $('#NumLiv') est effectivement l'Id du <tr>

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
<?php
 
          // BOUCLE SUR LECTURE DU CURSOR
          //   ------------------------
 
 
           $nbr=0;
           while ($donnees = $reponse->fetch())
           {
                    
 
      //   SURLIGNER la 1ere LIGNE du TAB EN ROUGE (lignecoloree) 
      //         (les autres lignes (lignenormale) )
          
 
            $nbr++;
            if ($nbr == 1)
               {
                  $numlivre = $donnees['Num'];
                  $classe = 'lignecoloree'; 
                }  
             else
                {
                  $classe = 'lignenormale';
                }
 
          
          
           // DONNEES A AFFICHER DS LIGNE DU 1ER TABLEAU 
          //    ----------------------
?>
 
          <tr class="<?php echo $classe; ?>" >   
 
              <td id="NumLiv" ><?php echo $donnees['Num'];   ?></td>
              <td class="coltitre" ><div class="debord"><?php echo $donnees['Titre']; ?></div></td>
              <td><?php echo $donnees['Annee']; ?></td>  
              <td><input type="checkbox" name="suppcheck[]" value="<?php echo $donnees['Num']; ?>" /></td>
              <td><input type="radio" name="modifradio[]"   value="<?php echo $donnees['Num']; ?>" /></td>
 
          </tr>
<?php

Pour la partie J.S:

Je pensais après l'appel à la fonction (LineClicked) continuer mon traitement et donc récupérer la valeur de la cellule :

Code :

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

  var numliv = $(this).find('#NumLiv').html();  // Récupére la valeur de la cellule

(Mais l'élément actif $(this) est tjrs la 1ère ligne car je récupère toujours la valeur de NumLiv = 1 )
(Alors que pour la colorisation, le $(this) change bien car au click d'une ligne , celle-ci se colorise bien...)

Est-ce le fait d'appeler la fonction et donc au sortie de celle-ci , je perds la valeur actuelle du $(this) ???

Je ne comprends pas bien la solution de faire 2 fonctions..., au niveau logique (trait séquentiel) il me semble que cela rejoint à ce que je fais.
(Excepté peut-être le fait de repasser en paramètre le $(this) à la 2ème fct ??)

[Invité]

Bonjour,

1- comme quoi, il n'était pas inutile de montrer le code HTML : un attribut id DOIT être UNIQUE.
Par conséquent, on ne peut pas mettre id="Numliv" dans une boucle (while, foreach,...)

2- Par contre, on peut utiliser un attribut data-* bien placé :

Code :

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

1
2
3
          <tr class="<?php echo $classe; ?>" data-num="<?php echo $donnees['Num']; ?>">   
 
              <td><?php echo $donnees['Num']; ?></td>

Et, au clic sur le <tr> :

Code :

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

       var NumLiv = elt.attr('data-num');

ou

Code :

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

       var NumLiv = elt.data('num');

[Phpx1]

Bonjour,

Finalement j'ai tout regroupé dans une même fonction et cela fonctionne !
(En conservant la solution initiale concernant la récupération du NumLiv.)

[Invité]

Bonjour,

ce serait aimable de montrer ta solution.

[Phpx1]

Bien sûr !!!!, et en plus ce n'est vraiment pas mon habitude....;-)).

Je n'ai pas voulu détailler plus uniquement car on évoquait déjà un peu la solution ds les messages précédents, c'est a dire de tout regrouper dans une même fonction (la récupération du numliv et l'Ajax) .
Concernant la récupération du numliv , j'ai conservé la solution initiale comme je le précise avec le Find ...

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
 $(document).ready(function(){
 
 
                 $('.scrolldown tbody').on('click','tr',function()
				 {
 
                     $('.scrolldown tr').removeClass('lignecoloree lignenormale');
 
                     $(this).addClass('lignecoloree');     // Rajoute la classe sur la ligne cliquee
 
                       var numliv = $(this).find('#NumLiv').html();  // Récupére la valeur de la cellule
 
 
 
 
                  $.ajax({
                         type: 'POST',
                         url: 'listchap-JSON.php',
                         data: 'num=' +numliv,
                         datatype: 'json',
 
 
                         success:function(data){
 
                         console.log("retour SUCCES fonction");
						 console.log("ret data "+data); 
 
                          $.each(data.listchap, function(index,valeur){
                              $("#ligneschap").append("<tr>"    
                                                 +"<td>" +valeur.chapitre+ "</td>"
                                                 +"<td>" +valeur.avion+    "</td>"
                                                 +"<td>" +valeur.date+     "</td>"
                                                 +"<td>" +valeur.pays+     "</td>"
                                                 +"<td>" +valeur.cie+      "</td>"
                                                 +"<td>" +valeur.comment+  "</td>"
                                                 +"</tr>");
                         });
 
						      console.log("APRES MAJ TABLEAU");
 
                         },
 
 
                        error:function(data)
                         { 
                          console.log("ERROR");
                         }  
 
                    });
			     });
           });

[Invité]

...un attribut id DOIT être UNIQUE.
Par conséquent, on ne peut pas mettre id="Numliv" dans une boucle (while, foreach,...)

Au minimum, remplace id par class, et $('#Numliv') par $('.Numliv').

[Phpx1]

Oui, effectivement, j'avais déjà pris en compte cette modif ( une erreur de version de prog) .