Bonjour à tous,

Je suis en train de réaliser un système de contrôle en ligne de mon tableau html5. J'aimerais quand je clique dans une cellule de mon tableau que je puisse modifier le contenu et l'enregistrer dynamiquement dans la base de données.

Quand je clique sur la cellule j'arrive à avoir le focus sur celle-ci et modifier son contenu mais mon problème est que la modification n'est pas enregistrée en base de données. quand j'actualise ma page il ne se passe rien et je n'ai pas d'erreur. Ci-dessous le code :

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
52
 
// connexion à la db
require_once('db.php');
 
$sql = 'SELECT info_id, info_titre, info_contenu FROM infos';
$req = $db->prepare($sql);
$req->execute() or die(print_r($req->errorInfo()));
$row = $req->fetch();
 
 // Fichier : ajax_request.php
 //define index of column
    $columns = array(
        0 =>'info_titre', 
        1 => 'info_contenu'
    );
    $error = true;
    $colVal = '';
    $colIndex = $rowId = 0;
 
    $msg = array('status'=>!$error, 'msg'=>'Echec lors de l\'enregistrement !');
 
    if(isset($_POST)){
        if(isset($_POST['val']) && !empty($_POST['val']) && $error) {
          $colVal = $_POST['val'];
          $error = false;
 
        } else {
          $error = true;
        }
        if(isset($_POST['index']) && $_POST['index'] >= 0 &&  $error) {
          $colIndex = $_POST['index'];
          $error = false;
        } else {
          $error = true;
        }
        if(isset($_POST['id']) && $_POST['id'] > 0 && $error) {
          $rowId = $_POST['id'];
          $error = false;
        } else {
          $error = true;
        }
 
        if(!$error) {
            $sql = "UPDATE infos SET ".$columns[$colIndex]." = '".$colVal."' WHERE info_id='".$rowId."'";
            $req = $db->prepare($sql);
            $req->execute() or die(print_r($req->errorInfo()));
            $msg = array('status'=>!$error, 'msg'=>'Saisie enregistrée avec success !');
        }
    }
 
    // send data as json format
    echo json_encode($msg);
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
 
<!-- tableau html5 -->
<div id="msg"></div>
<table border="1"  width="700px">
     <tr data-row-id="<?=$row['info_id'];?>">
           <td class="editable-col" contenteditable="true" col-index='0' oldVal="<?=$row['info_titre'];?>" ><?=$row['info_titre'];?></td>
    </tr>
    <tr data-row-id="<?=$row['info_id'];?>">
           <td class="editable-col" contenteditable="true" col-index='1' oldVal="<?=$row['info_contenu'];?>" ><?=$row['info_contenu'];?></td>
    </tr>
</table>
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
 
$(document).ready(function(){
  $('td.editable-col').on('focusout', function() {
    data = {};
    data['val'] = $(this).text();
    data['id'] = $(this).parent('tr').attr('data-row-id');
    data['index'] = $(this).attr('col-index');
 
    if($(this).attr('oldVal') === data['val'])
    return false;
 
    $.ajax({   
          type: "POST",  
          url: "ajax_request.php",  
          cache:false,  
          data: data,
          dataType: "json",       
          success: function(response)  
          {   
            if(response.status) {
              $("#msg").removeClass('alert-danger');
              $("#msg").addClass('alert-success').html(response.msg);
            } else {
              $("#msg").removeClass('alert-success');
              $("#msg").addClass('alert-danger').html(response.msg);
            }
          }   
        });
  });
});
Merci par avance !