11488 sujets

JavaScript, DOM et API Web HTML5

Ajax - récupérer id et le passer en paramètre

Bonjour,

Je galère pour trouver une solution à mon problème. J'ai un tableau avec des cases vides, ou rempli selon une base de données. Chaque case correspond à une heure, de 1 à 9. Si je clique sur une case rempli, ça m'affiche dans une fenêtre modale via ajax les info de la case. Si elle est vide, m'ouvre alors une fenêtre pour saisir un nom et enregistre en cas de validation les infos dans la base, avec entre autre quelle case a été cliquée...et c'est là que ça se gâte...
Soit je récupère l'id de la case, mais pas de fenêtre modale pour créer l'enregistrement dans la base. Soit je travail sur l'id de la form qui m'affiche bien la fenêtre, mais plus d'id de la case cliquée...

code de départ (lancePromotion.php) : 

<?php  

session_start();



$_SESSION['nom_serveur'] = 'localhost';
 $_SESSION['nom_user'] = 'progression';
$_SESSION['pass_user'] = 'progression';
$_SESSION['base'] = 'progression';
$_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(){
	
// ici, je peux récupérer l'id de la case cliquée
	 $(document).on('click', '.add_data', function(){
		  //$('#dataModal').modal();
		  var $retour = $(this).attr("id");

		  alert($retour);
		  
		  
		 });

//ici je ne sais pas comment récupérer cet id..	
  $('#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>


affichage du tableau (tableauPromotion.php) : 

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

   ?>


Code pour l'insertion (insertPromotion.php) :

<?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
// valeur de HORAIRE forcée à 3 pour tester bonne écriture
 //$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');
}
?>


et au cas où code pour l'affichage (selectPromotion.php) :

<?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;
	
}
?>


Par avance merci
Salut,

tu dois pouvoir rajouter un input hidden dans ta modal, et lors du clique sur un .add_data tu met l'id dans le input hidden.
Salut

Si je prend ce code 
// ici, je peux récupérer l'id de la case cliquée
	 $(document).on('click', '.add_data', function(){
		  //$('#dataModal').modal();
		  var $retour = $(this).attr("id"); 

		  alert($retour);
		  
		  
		 });

Ta variable $retourne vit que dans cette function.
Ici, quand tu clic tu récupère l'id de la case selectionné. Jusque la OK.
Mais ta variable retour à une porté qui propre à ta fonction.
La porté est importante en JS (ou tous les autres langages).

Si tu veux utiliser ta variable $retour dans d'autre fonction. alors sort là d'ici. et met là au niveau de la porté "globale" à toutes tes fonctions. 


var  $retour = -1;
// ici, je peux récupérer l'id de la case cliquée
	 $(document).on('click', '.add_data', function(){
		  //$('#dataModal').modal();
		  $retour = $(this).attr("id"); 
		  alert($retour);
		 });


  $('#insert_form').on("submit", function(event){ 
     alert(retour); // ici on aura soit -1 si on a cliquer sur aucune case, ce qui permet de bloqué le submit par exemple, soit la derniere valeur de l'id sur lequel tu as cliqué. 
}

Modifié par JENCAL (15 Jun 2023 - 10:23)
Prévenir un modérateur
Répondre au sujet
Aller à