Discussion :

[Phpx1]

Bonjour,

Je continue pas à pas....;-)) ma gestion de Livres où j'ai déjà posté un certain nbre de posts (excusez la répétition ;-)) à ce sujet ("Coloriser 1 ligne d'un tableau" et "Valeur cellule non récupérée") mais pour un bref, résumé:

J'ai 2 tableaux HTML sur la même page , (Le 1er liste les livres et le second liste les chapitres du livre concerné )
Dés qu'on clique sur une ligne du 1er tab , cela affiche (met à jour le second tab) les chapitres.

. Le 1er script php contient le J.S (Appel fct qui charge les chapitres) + affichage des tableaux .
. Le 2ème script charge les chapitres et retourne un JSON

Précisions sur le code et les tests:
-----------------------------------

Par défaut , au chargement du 1er script, il liste bien les livres et les chapitres du 1er livre mais dés que je clique sur une autre ligne, le tableau des chapitres ne se met jamais à jour... rien ne se passe (c'est tjrs les chapitres du 1er livre d'affichés) .

Je n'ai pas d'erreur particulière, j'ai fait un log du JSON et il me paraît être sous le bon format et j'ai bien mon log " APRES MAJ TABLEAU".

Concertant le JSON , je débute complétement..... car c'est en recherchant sur le net que j'ai "essayé" ;-)) de comprendre comment fonctionnait ce principe...!!!
(Rem: Je ne sais pas si c'est dû au "append" (pourtant j'ai vu des exemples de MAJ qui utilisait cette méthode) ou faut il utiliser plus logiquement la méthode "Replace" puisqu'il s'agit bien ds mon cas d'une simple maj du tableau ?)
Je vous ai joint la partie JS et le second script.
Merci bcp d'avance pour vos remarques.

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

Code php :

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
<?php
 
       //  echo " **** LISTCHAP-JSON-PHP  ***** "; 
      //   echo "num : $_POST['num'];"
      //   echo "Nouveau cpt: $num <br>";
 
 
try
{
      // On se connecte ? MySQL
      $bdd = new PDO('mysql:host=localhost;dbname=base2;charset=utf8','root','',array
      (PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION)); 
}
 
catch(Exception $e)
{
      // En cas d'erreur on affiche un msg et on arr?te tout
             die('Erreur : '.$e->getmessage());
 
}
 
$reponse = $bdd->query('SELECT * FROM CHAP WHERE Num = "'.$_POST["num"].'" ORDER BY Titre');
 
 
$res=[];
 
 
 
          // BOUCLE SUR LECTURE DU CURSOR  (CONSTITUTION du JSON )
          //   ---------------------------------------------------
 
           while ($donnees = $reponse->fetch())
           {
 
             //   echo "======> boucle sur le while <br>";                
 
 
                $res["listchap"][]=["chapitre"=>$donnees["Titre"], 
                                   "avion"    =>$donnees["Avion"],
                                   "date"     =>$donnees["Date"],
                                   "pays"     =>$donnees["Pays"],
                                   "cie"      =>$donnees["Cie"],
                                   "comment"  =>$donnees["Comment"]];
 
           }
 
 echo json_encode($res);
 
// }
 
 
?>

[Invité]

Bonjour,

une autre méthode est de construire le code HTML dans le fichier PHP.

1- Ajax :

Code jQuery :

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

1
2
3
4
5
6
7
8
9
		$.ajax({
...
		datatype: 'html',
 
		success:function(dataHTML){
 
			$("#ligneschap").html(dataHTML);
 
		},

2- Fichier PHP :

Code php :

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
$dataHTML = '';
while ($donnees = $reponse->fetch())
{
	$dataHTML .= '
	<tr>
		<td><?=htmlspecialchars($donnees["Titre"]);?></td>
		<td><?=htmlspecialchars($donnees["Avion"]);?></td>
		<td><?=htmlspecialchars($donnees["Date"]);?></td>
		<td><?=htmlspecialchars($donnees["Pays"]);?></td>
		<td><?=htmlspecialchars($donnees["Cie"]);?></td>
		<td><?=htmlspecialchars($donnees["Comment"]);?></td>
	</tr>
	';
}
 
echo $dataHTML;

[Phpx1]

J'essaierai cette méthode qui me semble effectivement plus lisible et plus simple .
Malheureusement, actuellement je n'ai pas la config adéquate pour poursuivre mes tests.

(Je ne m'explique tout de même pourquoi cette MAJ ne se fait pas....?)
Merci quand même.

[Phpx1]

Bonjour,

Malheureusement, cela ne fonctionne pas.
Sauf que maintenant il me rajoute maintenant des sortes d'interlignes vides (toutes petites ) et complètement décalées au dessus des lignes sélectionnées par défaut (NumLiv = 1).
(Rem: le nbre d'interlignes correspondant bien au nbre d'enregistrement en BDD)

et le log du retour data me renvoie aucune données mais le HTML. (et apparemment tronqué)
Je vous ai joint les copies d'écran (j'espère que la manip va marcher…) + la partie HTML de mon tableau (qui pourtant s'affiche correctement au chargement de la page)
Je ne sais plus trop quoi faire…..:-(( Décidement pour une première sur JSON, c'est pas terrible….;-))

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
  // DONNEES A AFFICHER DS LIGNE DU 2EME TABLEAU 
          //    ----------------------
?>
 
          <tr id="ligneschap">
 
              <td style="min-width:325px;max-width:325px" ><div class="debord"><?php echo $donnees['Titre']; ?></div></td>
              <td class="colgenre"><div class="debord"><?php echo $donnees['Avion'];   ?></div></td>
              <td><div class="debord"><?php echo $donnees['Date'];    ?></div></td>  
              <td><div class="debord"><?php echo $donnees['Pays'];    ?></div></td>
              <td><div class="debord"><?php echo $donnees['Cie'];     ?></div></td>
              <td><?php echo $donnees['Comment']; ?></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>

RE: j'ai été obligé pour la 1ere colonne de mettre en "dur" le style (pas tres joli) , il ne le prenait pas en compte dans le CSS...??(pas compris mais pour le reste c'était ok)

[Phpx1]

Bonjour,

Je viens de m'apercevoir d'un truc...
Comme la maj du tableau s'effectue logiquement que sur les données:

Titre,
Avion,
Date,
Pays,
Cie,
Comment

donc 6 colonnes , je ne rappelle pas lors de la reconstruction de mon tableau (retour JSON ou retour HTML) les 2 colonnes en fin de tableau suppcheck et modifradio.
Est-ce la cause du pb.....?

Dois-je vraiment recharger toutes les colonnes alors que je met à jour logiquement que les 6 premières ( en plus concernant les 2 dernières, ce sont juste des cases à cocher....?)
Merci pour vos remarques.

[Invité]

Bonjour,

que veux-tu qu'on te dise ?
Tu ne montres que des extraits de code... insuffisants pour répondre.