Modification d'un tableau avec mise à jour dynamique de la BDD

Commenter

Contenu du snippet

Ce code montre comment modifier en live les cellules d'un tableau.
Le tableau est le résultat d'une requête de BDD. On utilise
le tag html5 'contenteditable' pour rendre un champ TD modifiable. Le code
Javascript (jquery) permet de détecter le changement de contenu et transmet les
modifications en Ajax. Ainsi on ne quitte jamais la page html et on met à jour
la base de données dynamiquement. Pour tester le code, en plus des 2 fichiers
index.html et updatedynamique.php vous devez installer Jquery. Par défaut pas
besoin de base de données, le code php écrit à la place dans un fichier de
simulation qui se nomme simulation.txt. Les commentaires dans le code source
complètent la compréhension.
2 fichiers: index.html et updatedynamique.php
//====================================================
// index.html 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript" src="jquery.js"></script> 
<script> 
$(document).ready(function() 
{  
 $("td").click(function()  
  { 
   if( $(this).attr("contenteditable") == "true") 
   {    
    // le"id" du td doit contenir l'id de la BDD 
    // le "name" doit contenir le nom du champ à modifier 
     
    var contenu_avant = $(this).text(); 
                var id_bdd = $(this).attr("id"); 
                var champ_bdd = $(this).attr("name"); 
    //alert("avant =" + contenu_avant); 
                 
    $(this).blur(function() 
        { 
         var contenu_apres = $(this).text(); 
         //alert("contenu apres = " + contenu_apres); 
         
                                 if (contenu_avant != contenu_apres) 
                                     { 
          parametre='id='+id_bdd+'&champ='+champ_bdd+'&contenu='+contenu_apres ; 
          //alert(param) ; 
          $.ajax({ 
            url: "updatedynamique.php",  
            type: "POST",  
            data: parametre,  
            success: function(html) {  
                  //alert(html); 
                  } 
           }); 
          } 
          
        }); 
     
   };     
             
  }); 
});   

   
</script> 

 </head> 

 <body> 
  
 Le tableau ci-dessous est le résultat d'une requête sur une base de données Mysql contenant 1 table<br/> 
 Cette table 'repertoire' contient 2 champs 'nom' et 'telephone'<br/> 
 Ce code utilise Javascript, Jquery et Ajax.<br /> 
 Les champs seront mis à jour dynamiquement sans quitter la page Web.<br/> 
 Le tag 'contenteditable' est ajouté à chaque TD devant être modifié.<br /> 
 Ce tag est apparu avec HTML5 et va rendre éditable nos TD.<br /> 
 En cliquant sur le 1er nom ou 1er no de téléphone, vous pouvez modifier le contenu. <br /> 
 La 2eme ligne qui n'a pas le tag 'contenteditable' n'est pas modifiable.<br /> 
 Le clic déclenche la lecture et la sauvegarde du contenu initial.<br /> 
 En quittant le champ, la fonction 'blur' lit également le contenu et s'il a changé, <br /> 
 transmet les infos au code php (updatedynamique.php) pour mettre à jour la Base de données.<br /> 
 Vous n'avez pas besoin de creer la base de données pour essayer, on simule en écrivant dans un fichier. 
 <br /><br /><br /> 
  
  
 <table border="1"> 
  <tr> 
   <td >--   NOM   --</td> <td >--   TELEPHONE   --</td> 
  </tr> 
  <tr> 
   <td contenteditable="true" id="1" name="nom" >Dupont</td> 
   <td  contenteditable="true" id="1" name="telephone" >0102030405</td> 
   </tr> 
   <tr> 
   <td id="2" name="nom" >Larivierre</td> 
   <td id="2" name="telephone" >0504030201</td> 
   </tr> 
 </table>  
  
  
 </body> 

</html>


//==========================================
// fichier Updatedynamique.php 

<?php  
// 14-01-2014 
// $_POST[id]   contient l'id de la base de données 
// $_POST[champ]  contient le nom du champ à modifier 
// $_POST[contenu] contient la nouvelle valeur du champ 
// la base de données s'appelle 'Agenda' et contient 1 table 'repertoire' contenant 2 champs 'nom' et 'telephone'  

  $id=($_POST["id"]);  
  $champ=($_POST["champ"]);  
  $contenu=($_POST["contenu"]);  
  $BDD="agenda"; 
  $table="repertoire";  
   
  // accès BDD et UPDATE 
  // le code ci-dessous est mis en commentaire, le stockage dans un fichier servira de simulation. 
  // $link=mysql_connect("localhost", "identifiant", "motdepasse") or die(mysql_error()); 
  // mysql_select_db($BDD); 
  // mysql_query("SET NAMES 'utf8'");  
  //  
  // $sql = "UPDATE $table SET `$champ`='$contenu' WHERE id=$id "; 
  // mysql_query($sql) or die(mysql_error());  
  // mysql_close($link); 
  // 
  // echo "success"; 
  // fin accès à la base de données 
   
  // début de simulation -> écriture dans le fichier 'simulation.txt' 
  $trace = "id= ".  $id. " champ= ".  $champ . "  contenu= " . $contenu."\n"; 
  $monfichier = fopen("simulation.txt", "a"); 
  fputs($monfichier, $trace); 
  fclose($monfichier); 
?>


// fin

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.