PHPfrance

la communauté d'entraide francophone dédiée au PHP

Input éditable via boutton et requêtes SQL.

3 messages   •   Page 1 sur 1
   Outils de sujet
dayou05
Eléphanteau du PHP | 24 Messages

31 déc. 2014, 19:16

Bonjour à toutes et à tous!
Afin de répondre à un cahier des charges, je doit lors de l’appuie sur un bouton, rendre des cases ( input ) éditables afin de pouvoir modifier leurs contenu et lors de la validation modifier directement dans la BDD les nouvelles données, je tien à préciser que lord du clic sur le bouton Edition, le bouton se transforme en bouton de validation.

Voici la présentation de mon tableau :
tab-ajout.png

Et voici mon code :
<!DOCTYPE html>
<html>
<body>
<head>
 
  <meta charset="UTF-8">
 
  <title>CodePen - Minimal Flat Table Design</title>
 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
 
		<link rel="stylesheet" type="text/css" href="animate.css" media="screen" />
    <style type="text/css">
 
        html {
            height: 100%;
            width: 100%;
        }
 
        body {
            font-family: 'PT Sans', Tahoma, Arial, serif;
            line-height: 13px
        }
 
    </style>
	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
	 <link rel="stylesheet" type="text/css" href="buttons.css"/>
 
 
 
<script type='text/javascript'>
 
// On attend que la page soit chargée 
jQuery(document).ready(function()
{
   // On cache la zone de texte
   jQuery('#sForm').hide();
   // toggle() lorsque le lien avec l'ID #toggler est cliqué
   jQuery('.button.plusTd').click(function()
  {
      jQuery('#sForm').toggle(400);
      return false;
   });
});
/* ]]> */ 
 
// On attend que la page soit chargée 
jQuery(document).ready(function()
{
   // On cache la zone de texte
   jQuery('#sForm').hide();
   // toggle() lorsque le lien avec l'ID #toggler est cliqué
   jQuery('.button.plusTd2').click(function()
  {
      jQuery('#sForm').toggle(400);
      return false;
   });
});
/* ]]> */ 
 
 
/*      La le texte est en brut mais l'interet serait
        de mettre un iD a ce <tr> et de copier le
        contenu grace à clone();
        http://api.jquery.com/clone/                                    */
jQuery(document).ready(function()
{
 
 
$('.plusTd1').on('click',function() {
        $('#sFormadd').after('<tr><td><center><input type="text" name="index" id="text" size="15" value=""  maxlength="20"></center> </td><td><input type="text" name="nom" size="15" id="text0" value="" class="remplit" maxlength="20"><br></td><td><input type="text" name="id" size="15" id="text1"  value="" class="remplit" maxlength="20"> </td><td><input type="text"  size="15" name="type" id="text2" value="" class="remplit" maxlength="20"><br></td><td><input type="text" name="table" size="15" id="text3" value="" class="remplit" maxlength="20"> </td></tr>');
});
});
/* ]]> */ 
 
</script>
 
</head>
 
 
<?php
/* ------------------ CASE A COCHER ------------------ */
 // connexion
$mysql_user="admin";
$mysql_password="admin";
$reqco = mysql_connect("localhost",$mysql_user,$mysql_password);
 
//sélection de la BDD
$reqse = mysql_select_db("tp_arexx",$reqco);
 
//résupération des informations
$reqt=mysql_query("SELECT * FROM tp_arexx_capteurs",$reqco);
if ( $reqco == NULL ) 
{ 
    echo " Cet agent n'a participé à aucune session."; 
} 
 
/* ------------------ CASE A COCHER ------------------ */
/* ------------------ CASE A COCHER ------------------ */
 
if(!empty($_POST['champ'])) {
    // selection des noms de tables
    $sql = 'select Arexx_Table FROM tp_arexx_capteurs WHERE Arexx_index in('.implode(',',$_POST['champ']).')';
    $req = mysql_query($sql);
    while($d = mysql_fetch_assoc($req)) {
        $sql = 'DROP TABLE '.$d['Arexx_Table'];
        $req = mysql_query($sql);
    }
    mysql_free_result($req);
    // suppression des lignes
    $delete =  'DELETE FROM tp_arexx_capteurs WHERE Arexx_index in('.implode(',',$_POST['champ']).')';
	$req1 = mysql_query($delete);
 
}
 
 
 ?>
<script type="text/javascript">
 
    function generate(layout) {
 
        var n = noty({
		animation: {
        open: 'animated zoomIn', // Animate.css class names
        close: 'animated  zoomOut', // Animate.css class names
    },
 
            text        : 'Supression de X élements et de leurs tables liées.<br>Opérations terminées correctements.</br>',
            type        : 'success',
            dismissQueue: true,
            layout      : layout,
            theme       : 'relax',
			 template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
 
        }).setTimeout(3800).close();
 
 
        console.log('html: ' + n.options.id);
    }
 
 
    function generateAll() {
 
        generate('center');
 
 
    }
 
    $(document).ready(function () {
 
        generateAll();
 
    });
 
  </script>
<?php
 
 
 
 
/* ------------------ A partir d'ici table : alimentaire Lecture ------------------ */
$reponse = mysql_query("SELECT * FROM tp_arexx_capteurs"); // Requête SQL
?>
 
 
 <form method="POST" id="form" name="form">
 
 <div class="top-shadow">
<table class="flatTable" table border="0" CELLSPACING="0" >
  <tr class="titleTr">
    <td class="titleTd">Liste des capteurs</td>
    <td colspan="4"></td>
    <td class="plusTd button"></td>
 
				    <td class="plusTd3 button"></td>
	</div>
 
  </tr>
  <tr class="headingTr">
 <td><center>Index du capteur</center></td> 
<td><center>Nom du capteur</center></td> 
<td><center>Identifiant du capteur</center></td> 
<td><center>Type du capteur</center></td> 
<td><center>Table correspondant au capteur</center></td>
<td><center>Supprimer le capteur</center></td>
<td><center>Edition&nbsp;</center></td>
    <td></td>
  </tr>
 
 
<?php
//Affichage des informations
 
while ($tab_contenu=mysql_fetch_array($reponse)){
 
 
?> 
<tr>
<td><center><?php echo $tab_contenu['Arexx_index']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Name']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Id']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Type']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Table']; ?></center></td>
<section title=".squaredFour">
    <!-- .squaredFour -->
    <div class="squaredFour">
     <td style="text-align:center;width:20%;"><input type="checkbox" id="squaredFour" name="champ[]" value="<?php echo $tab_contenu['Arexx_index']; ?>" /></td>
 
 
      <label for="squaredFour"></label> 
    </div>
    <!-- end .squaredFour -->
  </section>
 <td class="controlTd">
      <div class="settingsIcons">
        <span class="settingsIcon"><img src="http://i.imgur.com/nnzONel.png" alt="X" /></span>
        <span class="settingsIcon"><img src="http://i.imgur.com/UAdSFIg.png" alt="placeholder icon" /></span>
        <div class="settingsIcon"><img src="http://i.imgur.com/UAdSFIg.png" alt="placeholder icon" /></div>
      </div>  
    </td>
</tr> 
 
<?php 
} 
 
?> 
</table>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  <form method="POST" action="Create.php" name="form">
 
<div id="sForm" class="sForm sFormPadding">
		<table class="flatTable" table border="0" CELLSPACING="0" >
 
 
  <tr class="titleTr">
    <td class="titleTd">Ajouter un capteur</td>
    <td colspan="4"></td>
 
 
	<td class="plusTd2 button"></td>
		<td class="plusTd4 button"></td>
	<td class="plusTd1 button"></td>
 
 
 
 
  </tr>
  <tr class="headingTr">
 <td><center>&nbsp;Index du capteur&nbsp;</center></td> 
<td><center>&nbsp;Nom du capteur&nbsp;</center></td> 
<td><center>&nbsp;Identifiant du capteur&nbsp;</center></td> 
<td><center>&nbsp;Type du capteur&nbsp;</center></td> 
<td><center>&nbsp;Table correspondant au capteur&nbsp;</center></td>
    <td></td>
  </tr>
 
 
<div id="sFormadd" class="sForm sFormPadding">
 
 
 <tr>
<td><center><input type="text" name="index" id="text" size="15" value=""  maxlength="20"></center> </td> 
<td><input type="text" name="nom" size="15" id="text0" value="" class="remplit" maxlength="20"><br></td> 
<td><input type="text" name="id" size="15" id="text1"  value="" class="remplit" maxlength="20"> </td> 
<td><input type="text"  size="15" name="type" id="text2" value="" class="remplit" maxlength="20"><br></td> 
<td><input type="text" name="table" size="15" id="text3" value="" class="remplit" maxlength="20"> </td> 
</tr> 
</form>
 
 
<?php 
$reponse1 = mysql_query("SELECT * FROM tp_arexx_capteurs");
//Affichage des informations
while ($tab_contenu=mysql_fetch_array($reponse1)){
 
 
	 include 'Create.php';
 
 
 
}
 
?>
 </div>
 
</table>
 <div class="bottom-shadow"></div>
    </div>
 
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
 
  <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
 
  <script src="js/index.js"></script>
 
 
 
 
</ul>
 
</form>
 
    </div>
<script src="jquery-1.7.2.min.js"></script>
 
<!-- noty -->
 
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" media="screen" />
<script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script>
 
<script type="text/javascript">
$('.button.plusTd3').click(function(){
 
if( $('input[id="squaredFour"]').is(':checked') ){
 
 
    function generate(layout) {
 
        var n = noty({
		animation: {
        open: 'animated zoomIn', // Animate.css class names
        close: 'animated  zoomOut', // Animate.css class names
    },
 
            text        : 'Voulez vous vraimmant continuer ?',
            type        : 'alert',
            dismissQueue: true,
            layout      : layout,
            theme       : 'relax',
            buttons     : [
                {addClass: 'btn btn-primary', text: 'Oui, supprimer', onClick: function ($noty) {
                    $noty.close(); 
					document.forms["form"].submit();
		}
 
                },
                {addClass: 'btn btn-danger', text: 'Annuler', onClick: function ($noty) {
                    $noty.close();
                  noty({dismissQueue: true, force: true, layout: layout, theme: 'relax', text: 'Vous avez annuler l\'opération', type: 'error'}).setTimeout(3600).close();
 
                }
                }
 
            ]
        });
        console.log('html: ' + n.options.id);
    }
 
 
    function generateAll() {
 
        generate('center');
 
 
    }
 
    $(document).ready(function () {
 
        generateAll();
 
    });
}
 
else {
    noty({text: 'Vous ne pouvez pas éffectuer cette opération.<br> Sélectionnez au moins une ligne.</br>', type: 'error', theme: 'relax', layout: 'center',}).setTimeout(3800).close();
}
});
</script>
<script type="text/javascript">
$('.button.plusTd4').click(function(){
 
if($(".remplit").val()==""){
   noty({text: 'Vous ne pouvez pas éffectuer cette opération.<br> Seule la case "Index du capteur" peut rester vide.</br>', type: 'error', theme: 'relax', layout: 'center',}).setTimeout(3800).close();
   }
   else {
    function generate(layout) {
 
        var n = noty({
		animation: {
        open: 'animated zoomIn', // Animate.css class names
        close: 'animated  zoomOut', // Animate.css class names
    },
 
            text        : 'Voulez vous vraimmant continuer ?',
            type        : 'alert',
            dismissQueue: true,
            layout      : layout,
            theme       : 'relax',
            buttons     : [
                {addClass: 'btn btn-primary', text: 'Oui, ajouter', onClick: function ($noty) {
                    $noty.close(); 
					document.forms["form"].submit();
 
 
 
		}
 
                },
                {addClass: 'btn btn-danger', text: 'Annuler', onClick: function ($noty) {
                    $noty.close();
                  noty({dismissQueue: true, force: true, layout: layout, theme: 'relax', text: 'Vous avez annuler l\'opération.', type: 'error', theme: 'relax', layout: 'center',}).setTimeout(3500).close();
 
                }
                }
 
            ]
        });
        console.log('html: ' + n.options.id);
    }
 
 
    function generateAll() {
 
        generate('center');
 
 
    }
 
    $(document).ready(function () {
 
        generateAll();
 
    });
 
}
});
 
</script>
<script type="text/javascript">
$('.controlTd').click(function(){
 
 
    function generate(layout) {
 
        var n = noty({
		animation: {
        open: 'animated zoomIn', // Animate.css class names
        close: 'animated  zoomOut', // Animate.css class names
    },
 
 
            type        : 'warning',
            dismissQueue: true,
            layout      : layout,
            theme       : 'relax',
      text: 'Attention ! <br> Les éléments de cette ligne sont modifiable.</br>',
	   timeout: 3800,
        });
        console.log('html: ' + n.options.id);
    }
 
 
    function generateAll() {
 
        generate('center');
 
 
    }
 
    $(document).ready(function () {
 
        generateAll();
 
    });
 
 
});
</script>
 
</body>
</html>
Je ne sais pas du tout par ou m'y prendre ! Voilà un grand merci à vous tous !
Bonne soirée/journée/matinée.
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
Mammouth du PHP | 688 Messages

31 déc. 2014, 19:32

un exemple sur http://jquery-datatables-editable.googl ... -edit.html
(avec double click sur une cellule pour l'éditer)
Mammouth du PHP | 1339 Messages

01 janv. 2015, 04:40

Le plus simple n'est il pas de laisser les valeurs dans les champs input directement ?
Ou de faire un lien vers une page d'édition du capteur ?
Parce que après sur le principe c'est pas très compliqué mais vu que t'es pas fan d'AJAX ...

Sinon t'as ca quoi ... http://www.appelsiini.net/projects/jedi ... fault.html
Bon sinon tu me fais un message privé et on se fait un TeamViewer
   Répondre
3 messages   •   Page 1 sur 1
   Outils de sujet