Mise à jour dynamique d'un tableau

**genedavid20** · 09/06/2023, 15h16

Bonjour,

Je tourne en rond depuis quelques temps, sans doute trop d'erreur de ma part. Je cherche à créer un tableau, où chaque case et cliquable. Lorsque la case est vide, une fenêtre modale s'ouvre et me demande la saisie d'un nom et d'un prénom, qui en cas de validation rempli la case du tableau de manière dynamique, sans rafraichissement complet de la page. Si la case est rempli, m'affiche simple dans une autre fenêtre modale juste la valeur du nom et du prénom.
C'est à peu près l'exemple simple, Le soucis c'est que soit j'arrive à remplir la bonne case, mais ensuite, si je clique sur une autre case vide, me renvoie tours sur la première case cliquée, soit ne fonctionne pas....
Auriez-vous un exemple simple et fonctionnel sur lequel m'appuyer ?

David

**mathieu** · 09/06/2023, 15h45

montrez nous votre code actuel et on essayera de l'améliorer.

**genedavid20** · 09/06/2023, 15h56

voilà

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
<?php
// Récupérer les données envoyées via Ajax
$nom = $_POST['nom'];
$prenom = $_POST['prenom'];
$caseID = $_POST['caseID'];
 
// Effectuer tout traitement supplémentaire si nécessaire
 
// Construire la réponse JSON
$response = array(
  'caseID' => $caseID,
  'nom' => $nom,
  'prenom' => $prenom
);
 
// Renvoyer la réponse au format JSON
header('Content-Type: application/json');
echo json_encode($response);
?>

le fichier index.html :

Code html :

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
  <title>Ma grille de cases</title>
  <!--  <script src="../scripts/jquery-3.6.0.min.js"></script>-->
  <script src="../scripts/jquery.min.js"></script>  
  <link rel="stylesheet" href="../css/bootstrap.min.css" />  
 <LINK rel="stylesheet" type="text/css" href="../css/style_progression.css">
 
 
  <script>
    $(document).ready(function() {
      $(".case").click(function() {
        // Afficher la fenêtre modale pour demander le nom et le prénom
        // Lancer une fonction pour envoyer les données via Ajax
      });
    });
 
 
    $("#myForm").submit(function(event) {
      event.preventDefault(); // Empêcher le rechargement de la page
  
      // Récupérer les valeurs du formulaire
      var nom = $("#nom").val();
      var prenom = $("#prenom").val();
  
      // Envoyer les données via Ajax
      $.ajax({
        type: "POST",
        url: "traitement.php", // Le fichier PHP de traitement
        data: {
          nom: nom,
          prenom: prenom,
          caseID: $(this).closest('.case').attr('id') // ID de la case cliquée
        },
        success: function(response) {
          // Traiter la réponse du serveur (si nécessaire)
          // Mettre à jour la case avec les données envoyées
          $("#" + response.caseID).text(response.nom + " " + response.prenom);
        }
      });
    });
  </script>
</head>
<body>
<table>
<tr>
<td><div class="case" id="ID_1"></div> </td>
<td><div class="case" id="ID_2"></div> </td>
<td><div class="case" id="ID_3"></div> </td>
</tr>
<tr>
<td><div class="case" id="ID_4"></div> </td>
<td><div class="case" id="ID_5"></div> </td>
<td><div class="case" id="ID_6"></div> </td>
</tr>
<tr>
<td><div class="case" id="ID_7"></div> </td>
<td><div class="case" id="ID_8"></div> </td>
<td><div class="case" id="ID_9"></div> </td>
</tr>
 
 
 
 
</table>
 
 
 
 
 
  <div id="myModal" class="modal">
    <form id="myForm">
      <label for="nom">Nom :</label>
      <input type="text" name="nom" id="nom">
 
      <label for="prenom">Prénom :</label>
      <input type="text" name="prenom" id="prenom">
 
      <input type="submit" value="Valider">
    </form>
  </div>
</body>
</html>

et le fichier traitement.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
17
18
19
20
21
22
<?php
// Récupérer les données envoyées via Ajax
$nom = $_POST['nom'];
$prenom = $_POST['prenom'];
$caseID = $_POST['caseID'];
 
 
// Effectuer tout traitement supplémentaire si nécessaire
 
 
// Construire la réponse JSON
$response = array(
  'caseID' => $caseID,
  'nom' => $nom,
  'prenom' => $prenom
);
 
 
// Renvoyer la réponse au format JSON
header('Content-Type: application/json');
echo json_encode($response);
?>

**mathieu** · 12/06/2023, 01h22

vous pouvez débuguer en affichant le contenu des variables pour vérifier qu'elles contiennent les valeurs attendues. par exemple la variable qui contient la réponse de la requête http.

**genedavid20** · 13/06/2023, 10h28

Bonjour,

Je joint ici mon code avec le soucis plus précis...
Le fichier initial lancePromotion.php permet de faire afficher un tableau (via tableauPromotion.php) lié à une base de données.
Certaines cases sont donc déjà rempli, et d'autre non.
Au clic sur une case rempli, affiche le contenu plus détaillé (via selectPromotion.php) et normalement, au clic sur une case vide demande la saisie d'un nom et ecas de validation créé un enregistrement supplémentaire dans la base de données (via insertPromotion.php). Le tout en Ajax....
Le problème réside sur le passage de paramètre de l'id de la case vide (vide_1, vide_2...).
Soit j'arrive à récupérer l'id de la case grace à "$(this).attr("id");", mais uniquement lorsque cela suit "$(document).on('click', '.add_data', function(){", soit la même commande m'affiche "insert_form" après la commande "$('#insert_form').on("submit", function(event){". Malheureusement, l'appel à insertPromotion.php ne fonctionne que dans la seconde commande.....

(pour vérifier l'écriture dans la BdD, j'ai forcé la valeur à 3 pour le champ "horaire", cet horaire est dans l'id de la case vide cliquée que je n'arrive justement pas à passer en paramètre...)

comment résoudre mon soucis ??
par avance merci.

lancePromotion.php :

Code html :

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<?php  
 
session_start();
 
 
 
$_SESSION['nom_serveur'] = 'localhost';
 $_SESSION['nom_user'] = 'test';
$_SESSION['pass_user'] = 'test';
$_SESSION['base'] = 'test';
$_SESSION['case'] = 'vide';
 
 ?>  
<!DOCTYPE html>  
<html>  
 
 
 <head>  
  <title>Progressions</title>  
 
 
 
  <script src="../scripts/jquery.min.js"></script>  
  <link rel="stylesheet" href="../css/bootstrap.min.css" />  
 <LINK rel="stylesheet" type="text/css" href="../css/style_progression.css">
  <script src="../scripts/bootstrap.min.js"></script>  
 </head>  
 
 
 <body>  
  <br /><br />  
  <div class="container" style="width:700px;">  
   <h3 align="center">Gestion des promotions</h3>  
   <br />  
   <div class="table-responsive">
<!--     <div align="right">
     <button type="button" name="age" id="age" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Nouveau Cours</button>
    </div>  -->
    <br />
    <div id="employee_table">
 
      <?php
      
 include ('tableauPromotion.php');
  
   ?>
 
 
 
 
    </div>
   </div>  
  </div>
 </body>  
</html>  
 
<!--  module d'insertion -->
 
<div id="add_data_Modal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Cr&eacuteation d'un nouveau cours</h4>
   </div>
   <div class="modal-body">
    <form method="post" id="insert_form">
 
 
    <table class="table table-bordered">
     <tr>  
            <td width="30%"><label>Nom du formateur</label></td>  
            <td width="70%"><input type="text" name="NOM" id="NOM" class="form-control" /></td>  
        </tr>
         <tr>  
            <td width="30%"><label>Type de formateur</label></td>  
            <td width="70%"><select name="typeFormateur" id="typeFormateur" class="form-control">
          	<option value="FG">FG</option>
          	<option value="FTSI">FTSI</option>
          	<option value="FTFI">FTFI</option>
          	<option value="Exterieur">Ext&eacuterieur</option>
		   	<option value="administratif">administratif</option>
     		<option value="TSIC">TSIC</option>
 
     </select></td>  
        </tr>
        <tr>  
            <td width="30%"><label>Interne</label></td>  
            <td width="70%"> 
            	<label class="btn btn-secondary active"><input type="radio" name="interne" id="interne" autocomplete="off" checked>Interne</label>
            	<label class="btn btn-secondary"><input type="radio" name="interne" id="externe" autocomplete="off">Externe</label>
 
</td>  
        </tr>
 
<tr>
<td><input type="submit" name="insert" id="insert" value="Créer" class="btn btn-success" /> </td>
<td><button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button></td>
 
</tr>
 
</table>
 
 
<br /> 
     <br />
     <!-- <input type="submit" name="insert" id="insert" value="Insertion" class="btn btn-success" /> -->
 
    </form>
   </div>
   <div class="modal-footer">
    <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button> -->
   </div>
  </div>
 </div>
</div>
 
<!-- module de visualisation -->
 
<div id="dataModal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Informations sur le cours</h4>
   </div>
   <div class="modal-body" id="cours_detail">
 
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>
</div>
 
 
<script>  
 
 
 
$(document).ready(function(){
        
 
         $(document).on('click', '.add_data', function(){
                  //$('#dataModal').modal();
                  var $retour = $(this).attr("id");
 
                  alert($retour);
                  
                  
                 });
        
  $('#insert_form').on("submit", function(event){ 
 
        event.preventDefault();
        alert($(this).attr("id")); 
        
        alert($('#insert_form').serialize()); 
  if($('#NOM').val() == "")  
  {  
   alert("Le nom est obligatoire");  
  }  
  
   
  else  
  {  
   $.ajax({  
    url:"insertPromotion.php",  
    method:"POST",  
    data:$('#insert_form').serialize(),  
    beforeSend:function(){  
     $('#insert').val("Inserting");  
    },  
    success:function(data){  
     $('#insert_form')[0].reset();  
     $('#add_data_Modal').modal('hide');  
     $('#employee_table').html(data);  
    }  
   });  
  }  
 });
 
 
        
 
 $(document).on('click', '.view_data', function(){
  //$('#dataModal').modal();
  var cours_id = $(this).attr("id");
  
 
  // si pour visualisation
  if (cours_id.indexOf('vide')<0) {
          
        $.ajax({
        url:"selectPromotion.php",
        method:"POST",
        data:{cours_id:cours_id},
        success:function(data){
            $('#cours_detail').html(data);
            $('#dataModal').modal('show');
        }
        });
  }
 });
});  
 </script>

tableauPromotion.php :

Code html :

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
65
66
67
68
69
70
71
72
73
74
75
76
<?php
 
 // session_start();
 
 
$connect = mysqli_connect($_SESSION['nom_serveur'], $_SESSION['nom_user'], $_SESSION['pass_user'], $_SESSION['base']);
 
     //<table class="table table-bordered">  
//recherche promotion par défaut 167
// jour lundi
// semaine 1
 
 
 
/*
 select  cours.ID, cours.HORAIRE from cours, `promotion-cours`, promotion
WHERE cours.ID = `promotion-cours`.ID_COURS
AND `promotion-cours`.ID_PROMOTION = promotion.ID
AND promotion.NOM = "PROMO TEST EGPX"
AND `promotion-cours`.NUM_SECTION = 1
AND cours.JOUR = 1
AND cours.SEMAINE = 5
ORDER BY cours.HORAIRE
 */
 
 
   $output = '';
    // $output .= '<label class="text-success">Data Inserted</label>';
     $select_query = 'select  cours.ID AS identifiant, cours.HORAIRE AS heure, cours.DUREE from cours, `promotion-cours`, promotion
WHERE cours.ID = `promotion-cours`.ID_COURS
AND `promotion-cours`.ID_PROMOTION = promotion.ID
AND promotion.NOM = "PROMO TEST EGPX"
AND `promotion-cours`.NUM_SECTION = 1
AND cours.JOUR = 1
AND cours.SEMAINE = 5
ORDER BY heure';
     $result = mysqli_query($connect, $select_query);
     $output .= '
      <table class="table table-bordered">  
                                <tr>  
                
 
     ';
     
     $output .= '<td>heure 1</td><td>heure 2</td><td>heure 3</td><td>heure 4</td><td>heure 5</td><td>heure 6</td><td>heure 7</td><td>heure 8</td><td>heure 9</td></tr><tr>';
     
     $horaireTableau = 1;
     While ($row = mysqli_fetch_array($result)) {
        for ($indexhoraireTableau = $horaireTableau;$indexhoraireTableau<$row["heure"];$indexhoraireTableau++) {
                //      dessin case vide
                $output .= '<td data-toggle="modal" data-target="#add_data_Modal" class="add_data" id="vide_'.$horaireTableau.'" ></td>';
                $horaireTableau++;
                 
        }
        //dessin case avec cours
        $output .= '<td colspan = "'.$row["DUREE"].'" class="view_data" id="'. $row["identifiant"] .'" >cours :' . $row["identifiant"] . '</td>';
        $horaireTableau = $horaireTableau + $row["DUREE"];
     }
     
     while ($horaireTableau<10) {
        //      dessin case vide
        $output .= '<td data-toggle="modal" data-target="#add_data_Modal" class="add_data" id="vide_'.$horaireTableau.'"></td>';
        $horaireTableau++;
        
     }
     
     $output .= '                    </tr>
     </table>';
         
 //fermeture de la connection Ã* la& base de donnÃ©es
 
  
    echo $output;
        
 
   ?>

selectPromotion.php :

Code html :

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
<?php  
//selectPromotion.php  
 
session_start();
 
 
 
 
 
if(isset($_POST["cours_id"]))
{
 $output = '';
 $connect = mysqli_connect($_SESSION['nom_serveur'], $_SESSION['nom_user'], $_SESSION['pass_user'], $_SESSION['base']);
 
 
 $query = 'SELECT formation.CLAIR FROM cours, formation WHERE cours.ID_FORMATION = formation.ID AND cours.ID = '.$_POST["cours_id"];
 $result = mysqli_query($connect, $query);
 $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">';
    while($row = mysqli_fetch_array($result))
    {
     $output .= '
     <tr>  
            <td width="30%"><label>Cours :</label></td>  
            <td width="70%">'.$row["CLAIR"].'</td>  
        </tr>
 
     ';
    }
 
    $output .= '</table></div>';
    echo $output;
        
}
?>

insertPromotion.php :

Code html :

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
<?php
 
session_start();
 
 
 
//$connect = mysqli_connect("srv-enp89-web", "progression", "progression", "progression");
if(!empty($_POST))
{
        $connect = mysqli_connect($_SESSION['nom_serveur'], $_SESSION['nom_user'], $_SESSION['pass_user'], $_SESSION['base']);
 
        
        $output = '';
 
        
        
 //création de l'enregistrement dans la table cours
 //$sql_insert_cours = "INSERT INTO `cours`( `ID_FORMATION`, `HORAIRE`, `JOUR`, `SEMAINE`, `ANNEE`, `DUREE`, `ID_COURSDEBUT`) VALUES (1,".$_SESSION['case']."1,5,2023,2,0)";
 $sql_insert_cours = "INSERT INTO `cours`( `ID_FORMATION`, `HORAIRE`, `JOUR`, `SEMAINE`, `ANNEE`, `DUREE`, `ID_COURSDEBUT`) VALUES (1,3,1,5,2023,2,0)";
 
 //sauvegarde de la table principal
 
 $reqCourrier = mysqli_query($connect, $sql_insert_cours) ;
 
  
 
 // récupération de l'ID du cours créé
 
 
 
 $sql_id_cours = "SELECT ID FROM cours ORDER BY ID DESC LIMIT 1";
 
 $req_id_cours = mysqli_query($connect, $sql_id_cours);
 
 $data_id_cours = mysqli_fetch_array($req_id_cours);
 $ID_Cours =$data_id_cours['ID'];
 //création de l'enregistrement dans la table promotion-cours
 $sql_insert_PromotionCours = "INSERT INTO `promotion-cours`( `ID_COURS`, `ID_PROMOTION`, `NUM_SECTION`, `NUM_DEMISECTION`) VALUES ('.$ID_Cours.',1,1,0)";
  
  
 //sauvegarde de la table principal
  
 $req_insert_PromotionCours = mysqli_query($connect, $sql_insert_PromotionCours);
    
    
    
   
    //echo $output;
        include ('tableauPromotion.php');
}
?>

**genedavid20** · 15/06/2023, 10h21

C'est bon, trouvé la solution de mon problème.
dans le source lancePromotion.php, dans la balise < form method="post" id="insert_form"> j'ai ajouté data-case="".

puis dans le script du test sur le click d'une case, j'ai ajouté $(''#insert_form').attr('data-case', $(this).attr("id"));.

enfin, toujours dans le script, à l'appel de insertPromotion.php, j'ai modifié le data par data:$('#insert_form').serialize()+'&data-case='+$('#insert_form').attr('data-case'),

et voilà.

Mise à jour dynamique d'un tableau

AJAX

Vue hybride

Discussions similaires

Partager

Partager