Edition d'un tableau en ligne avec PHP, MYSQL et jQuery Ajax

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 :

// 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);

<!-- 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>

$(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);
            }
          }   
        });
  });
});

Ma requête ajax se lance belle et bien. J'ai le message d'erreur suivant : Échec lors de l'enregistrement !

Mais je ne trouve pas l'origine du problème.
Merci par avance !
Modifié par dinolam (09 Nov 2016 - 18:13)

Re,

J'ai corrigé le problème d'update.
J'ai juste mal placé cet attribut dans une de mes tr :

<tr data-row-id="<?=$row['info_id'];?>"></tr>

Maintenant un autre problème est que quand je fais de modification dans la 2ème tr il l'enregistre dans la colonne de la première.

Je pense le problème vient de mes cellules puisqu'elles ont des indexes différents (col-index=' ').
Mais au niveau de ma base de données mes champs ont le même id donc ils sont sur la même ligne.

Comment dois-je régler ce problème ?

Cdlt,