Discussion :

[mOscar007]

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 !

[Celira]

1ère chose à vérifier : est-ce que la requête AJAX est bien lancée ? Si oui, vérifier la réponse obtenue.

[mOscar007]

Bonjour @Celira,

Merci d'avoir pris le temps de me répondre.
Pour répondre à ta question, ma requête 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.

Cdlt,

[sabotage]

Si tu obtiens "Echec" c'est que ton code ne va pas jusqu'à l'UPDATE : "Echec" est le message défini au début du code (étrange comme logique) et "saisie enregistrée" est le message défini après l'UPDATE (sans avoir contrôlé si l'update avait fonctionné)

[Shooter]

Bonjour,

avant ça, tu as un problème de gestion de ton "$error"

relis ton code, tu te rendra compte que tu testes "$erreur" alors que celui-ci change de valeur et du coup passe systèmatiquement dans ton
- "if" ligne 23 et devient false
- "else" ligne 34 et devient "true"
- "if" ligne 36 et devient "false"

ce qui fait qu'en réalité tu ne rentre jamais dans le "if" ligne 30 d'ou colIndex est toujours égale à 0 : ta requête n'updatera que le "titre"

[mOscar007]

Re,

Pour répondre à @Shooter, je ne pense pas que $error bloque quoique ce soit. Je fais de test pour vérifier si mes paramètres existent (dans ce cas $error = false), sinon ($error = true).
Même par exemple quand je l'enlève $errer dans mon test il ne se passe rien.

Exemple: partie modifiée

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
 
if(isset($_POST)){
        if(isset($_POST['val']) && !empty($_POST['val'])) {
          $colVal = $_POST['val'];
          $error = false;
        } else {
          $error = true;
        }
        if(isset($_POST['index']) && $_POST['index'] >= 0) {
          $colIndex = $_POST['index'];
          $error = false;
        } else {
          $error = true;
        }
        if(isset($_POST['id']) && $_POST['id'] > 0) {
          $rowId = $_POST['id'];
          $error = false;
        } else {
          $error = true;
        }
}

Et pour @sabotage, justement mon code n'arrive pas jusqu'à l'update d’où l'erreur. Mais je n'arrive pas à identifier ce qui bloque.

Cdlt,

[Celira]

Tu peux ajouter des var_dump et des echos un peu partout pour debugguer. A noter que ça va probablement faire planter la partie javascript qui traite le résultat, mais tu aurais l'affichage des debug dans les outils de dev de ton navigateur.