Editer cellule tableau en ligne avec PHP, MYSQL et jQuery Ajax [Résolu]

Question

Editer cellule tableau en ligne avec PHP, MYSQL et jQuery Ajax [Résolu]

Signaler

Utilisateur anonyme - Modifié par dinolam le 12/11/2016 à 16:37
Utilisateur anonyme - 16 nov. 2016 à 15:09

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 éditer son contenu et l'enregistrer automatiquement dans la base de données.
J'arrive à avoir le focus sur une cellule et modifier son contenu. Mon problème c'est au niveau de l'update. Je pense que le souci vient de mes cellules puisqu'elles ont des indexes différents (col-index). Hors au niveau de ma BD mes champs ont le même id donc ils sont sur la même ligne dans une même table. Quand je fais une modification dans le première cellule tout va bien mais dès que je modifie la deuxième cellule son contenu est enregistré dans la première. Vu qu'elles ont le même id mais c'est juste les indexes des cellules qui sont différents.

Si quelqu'un peut m'aider à corriger ce problème. Je vous remercie par avance.
Ci-dessous le code:


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


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


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

A voir également:

Jquery ajax php mysql
Jquery mysql table - Meilleures réponses
Ajax php mysql - Meilleures réponses
Chat ajax php mysql - Guide
Ajax php mysql - Guide
Jquery autocomplete php mysql - Guide
PHP : Chat ajax avec mysql quasi complet - CodeS SourceS - Guide
PHP : Création d'une liste deroulante continent pays gouvernorat ville -- php mysql ajax - Co - Guide

13 réponses

Répondre Posez votre question

jordane45 · Answer 1 · 2016-11-12T19:31:58+0100

Réponse 1 / 13

jordane45

Messages postés: 32277
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 3 mai 2021

346
12 nov. 2016 à 19:31

Bonjour,

1 - Pour la récupération des variables procède ainsi :
http://codes-sources.commentcamarche.net/forum/affich-10070012-probleme-undefined-index-et-variables-probleme#p10070013
(écriture ternaire pour éviter les IF / ELSE.. )

2 - Vu que tu utilises PDO... active la gestion des erreurs PDO
http://www.commentcamarche.net/faq/46512-pdo-gerer-les-erreurs

3 - Dans le code que tu nous donnes... .. fais donc un echo de ta variable $sql pour voir ce qu'elle contient

Utilisateur anonyme · Answer 2 · 2016-11-12T20:54:47+0100

Bonjour @jordane45,

Merci d'avoir pris le temps de me répondre.
Je n'ai pas de message d'erreur dans mon code. L'update se passe bien et ma requête ajax m'envoie un message de succès.

Le problème se situe au niveau de l'attribut l'attribut data-row-id :

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

. Mes deux cellules ont le même id (la même ligne) dans la table infos. Vu que dans le where de mon update je fais référence avec ce même id. Du coup quand je fais une modification dans une des cellules il l'enregistre toujours dans la première par defaut. Est-ce qu'il y a une alternative pour je puisse utiliser l'id mais distinguer mes cellules? Merci.

L'echo de $sql m'affiche ceci:


UPDATE infos SET info_titre = 'Je suis le titre de la cellule' WHERE info_id='1'

Cdlt,

Utilisateur anonyme · Answer 3 · 2016-11-12T21:46:15+0100

Réponse 3 / 13

Utilisateur anonyme
12 nov. 2016 à 21:46

Oui.
Les deux cellules ont le même id.

Signaler

jordane45

Messages postés: 32277
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 3 mai 2021

346
12 nov. 2016 à 21:48

Dans ton php... C'est quoi cette ligne 18 ??

Utilisateur anonyme · Answer 4 · 2016-11-12T22:34:38+0100

Réponse 4 / 13

Utilisateur anonyme
12 nov. 2016 à 22:34

La ligne 18 correspond à l'index d'une cellule et l'id correspondant à un champ. Je les initialise à 0. Ils prennent les valeurs de col-index et info_id respectivement en fonction des cellules à modifier.

Signaler

jordane45

Messages postés: 32277
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 3 mai 2021

346
12 nov. 2016 à 22:58

Dans la console de ton navigateur (je te conseille d'utiliser FireFox et son plugin firebug ) .. qu'as tu comme valeurs lors de l'envoie de l'ajax ?

Utilisateur anonyme · Answer 5 · 2016-11-12T23:35:35+0100

Réponse 5 / 13

Utilisateur anonyme
Modifié par dinolam le 12/11/2016 à 23:37

Lors de l'envoie de l'ajax j'ai ceci :

{"status":true,"msg":"Saisie enregistrée avec success !"}

Dans le post j'ai ceci :

id 1
index 0
val Je suis le titre modifié de la cellule

Signaler

jordane45

Messages postés: 32277
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 3 mai 2021

346
13 nov. 2016 à 00:10

e INDEX = 0 c'est bon ? ça correspond bien à la bonne cellule ou pas ?

Utilisateur anonyme · Answer 6 · 2016-11-13T00:36:41+0100

Réponse 6 / 13

Utilisateur anonyme
13 nov. 2016 à 00:36

Oui oui

Signaler

jordane45

Messages postés: 32277
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 3 mai 2021

346
13 nov. 2016 à 01:00

Donc index= 0 c'est bon
et ta requête :

UPDATE infos SET info_titre = 'Je suis le titre de la cellule' WHERE info_id='1'

est bonne aussi ?
Ben qu'est-ce qui ne va pas alors ???

Utilisateur anonyme · Answer 7 · 2016-11-14T16:27:59+0100

Réponse 7 / 13

Utilisateur anonyme
14 nov. 2016 à 16:27

En fait mon problème est que les 2 cellules ont le même id dans ma table. C-à-d qu'elles représentent les contenus de mes colonnes. Vu que j'ai une seule ligne dans ma table je ne fais pas de boucle. Du coup il y a un seul id pour mes 2 cellules et si je fais un update avec la condition where, il l'enregistre toujours dans la première colonnes quelque soit la cellule modifiée.

Signaler

jordane45

Messages postés: 32277
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 3 mai 2021

346
14 nov. 2016 à 22:55

En fait mon problème est que les 2 cellules ont le même id dans ma table. C-à-d qu'elles représentent les contenus de mes colonnes

Tu radotes.....

Du coup il y a un seul id pour mes 2 cellules

Tu as un seul ID .. qui correspond donc à la LIGNE correspondante de ta table.
Par contre, tes deux cellules sont identifiées (ou sont du moins sensées l'être...) par le "col-index"

Donc... je t'ai demandé si dans tes variables envoyées en POST à ton fichier php si la variable INDEX = 0 est bien la bonne valeur ou non ????

Perso.. dans le code html de te cellules, je remplacerai

col-index='1'

par :

data-index='1'

puis dans le code javascript :

 data['index'] = $(this).attr('col-index');

A remplacer par :

 data['index'] = $(this).data('index');

Une fois cela fait, vérifie que la cellule que tu modifie envoie bien le bon INDEX en ajax à ton fichier PHP..

Utilisateur anonyme · Answer 8 · 2016-11-16T09:15:27+0100

Réponse 8 / 13

Utilisateur anonyme
Modifié par dinolam le 16/11/2016 à 09:39

Re,

J'étais bien répondu à propos de la variable index dans mon fichier php. Je récupère bien l'index qui correspond à une cellule. Mon problème est au niveau de l'enregistrement en base de données !!!

Dans ma requête update j'ai une condition where qui fait référence à l'id de ma table (info_id). Quand je fais une modification dans une cellule je veux l'enregistrer dans la colonne correspondante dans ma table. Mais ce n'est pas le cas parce que l'update se fait toujours dans la (première) colonne info_titre ou de fois dans toutes les colonnes en même temps. J'ai même enlevé la condition where pour tester mais sans résultat :

UPDATE infos SET ".$columns[$colIndex]." = '".$colVal."'

- Résultat de la requête première cellule: info_titre

id: 1
index : 0
val: Je suis le titre modifié de la cellule info_titre

- Résultat de la requête première cellule: info_contenu

id: 1
index : 1
val: Je suis le titre modifié de la cellule info_contenu

Est-ce que je suis claire ?

Signaler

jordane45

Messages postés: 32277
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 3 mai 2021

346
16 nov. 2016 à 10:50

Quand je li ça ...

J'ai même enlevé la condition where pour tester

Je comprend surtout que tu ne sais pas ce que tu fais !!!!!

Dans ton message http://codes-sources.commentcamarche.net/forum/affich-10070789-editer-cellule-tableau-en-ligne-avec-php-mysql-et-jquery-ajax#8

Tu m'a indiqué que
id = 1 (mais ça on s'en fou vu que le souci ne se trouve pas sur l' ID de la ligne à modifier mais uniquement sur la colonne )

index = 0 (là tu m'as dis que c'était ok )

et donc que la requête ( $sql ) était :

UPDATE infos SET info_titre = 'Je suis le titre de la cellule' WHERE info_id='1'

==> La colonne à modifier étant dans ce cas là "info_titre".

Ce qui me semble ok également vu que dans ton fichier PHP tu as déclaré :

    $columns = array(
        0 =>'info_titre', 
        1 => 'info_contenu'
    );

Donc pour ce cas là .. tout semble OK.

Par contre... si tu fais la même chose sur ta deuxième cellule .... qu'est-ce que ça donne ??
Normalement tu devrais avoir :
id = 1
index = 1

et la requête ( donc le contenu de ta variable $sql ) devrait devenir :

UPDATE infos SET info_contenu = 'Je suis le titre de la cellule' WHERE info_id='1'

Pour s'en assurer...
merci de nous coller le résultat de la console de ton navigateur ( lors de l'envoie ajax )
ainsi que le résultat du echo $sql

Utilisateur anonyme · Answer 9 · 2016-11-16T11:20:00+0100

Réponse 9 / 13

Utilisateur anonyme
16 nov. 2016 à 11:20

Puisque je n'arrive pas à me faire comprendre malgré les explications. Est-ce qu'il y a possibilité d'enregistrer mes infos dans un fichier à partir de mon tableau ?

Merci !

Signaler

jordane45

Messages postés: 32277
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 3 mai 2021

346
16 nov. 2016 à 11:35

Puisque je n'arrive pas à me faire comprendre malgré les explications

Tu te fais très bien comprendre ... pas de soucis....
Mais c'est TOI qui ne comprend pas ce que je te marque !

Est-ce que au moins tu comprends ce que tu es en train de coder ????

Maintenant... si tu veux qu'on essaye de corriger ton souci..... REPOND à mes questions.....

Utilisateur anonyme · Answer 10 · 2016-11-16T12:42:46+0100

Oui je comprend très bien ce que je suis en train de faire et ce que tu me disais mais seulement je me vois répéter les mêmes choses sans avancer.

L'index serve à identifier la cellule qui a été modifiée et parcoure son contenu grâce au tableau $column:


$columns = array(
        0 =>'info_titre', 
        1 => 'info_contenu'
    );

Je récupère bien les bons indexes en fonction de la cellule. Donc pas de soucis à ce niveau ! Maintenant quand tu fais un update tu précises toujours la condition where pour indiquer dans quel champ tu veux apporter de modifications. Or les 2 champs info_titre et info_contenu dans la table infos sont référencés par un même id (= 1). La structure de ma table infos est : info_id, info_titre et info_contenu. Quand je fais un update par exemple du contenu du champ info_contenu avec la condition where. Je lui dis de m'enregistrer le contenu ou l'id = 1. La colonne info_titre à le même id puisque la requête cherche le premier champ qui a ce même id. Et donc il l'enregistre dans ce champ (info_titre) le contenu du champ info_contenu. Et si la modif est faite sur le champ info_titre il l'enregistre dans le même (c'est qui normal).

Maintenant trop assez parler. Si tu penses que mon problème n'est pas là, donnes-moi un exemple de code pour que je puisse tester et corriger si tu penses avoir compris mon problème.

Merci !

jordane45 · Answer 11 · 2016-11-16T13:40:30+0100

Maintenant quand tu fais un update tu précises toujours la condition where pour indiquer dans quel champ tu veux apporter de modifications

NON
Le WHERE sert à indiquer l' ID de la ligne concernée... pas le CHAMP lui même.
Le champ lui est indiqué via le SET

Or les 2 champs info_titre et info_contenu dans la table infos sont référencés par un même id (= 1).

Oui ils sont (si on se représente la table de ta BDD comme un TABLEAU ) sur la même LIGNE
Par contre tu as bien un champ nommé info_titre et un autre nommé info_contenu

La structure de ma table infos est : info_id, info_titre et info_contenu

Nous sommes d'accord.

Ton code génèrera donc deux requêtes différentes (selon que tu modifie l'une au l'autre de tes cellules )

UPDATE infos SET info_titre = 'Je suis le titre de la cellule' WHERE info_id='1'

UPDATE infos SET info_contenu = 'Je suis le contenu de la cellule' WHERE info_id='1'

Maintenant trop assez parler. Si tu penses que mon problème n'est pas là, donnes-moi un exemple de code pour que je puisse tester et corrige

TU parles en effet beaucoup ... tu répètes plusieurs fois la même chose... sans que ça ne serve à rien.....
Je ne te demande pas de répéter ton souci ... mais de répondre aux questions (pourtant simples) que je te pose. Cela dans le but de trouver où se situe ton problème justement !
Pour ce qui est de l'exemple de code.... je t'en ai donné un !
L'as tu regardé ????
As tu appliqué les conseils que je t'ai donné pour modifier ton code ????

Si tu ne corriges pas ton code en tenant compte de mes remarques et que tu ne réponds pas aux question que je te pose.... il me sera IMPOSSIBLE de t'aider.

Sachant que...
Je veux bien t'aider à trouver le souci.... mais pas le faire à ta place

jordane45 · Answer 12 · 2016-11-16T14:11:39+0100

Bon....

J'ai corrigé ton script PHP
Peux tu le tester ?

<?php
// Fichier : ajax_request.php
//---------------------------------------//
 
 // connexion à la db
  require_once('db.php');
 
 //define index of column
  $columns = array( 0 =>'info_titre', 1 => 'info_contenu');
  
 //récupération "propre" des variable)
  $colVal = isset($_POST['val']) ? $_POST['val'] : "";
  $colIndex = !empty($_POST['index']) ? $_POST['index'] : 0;
  $rowId = !empty($_POST['id']) ? $_POST['id'] : NULL;
  
 // Si un id est bien passé en paramètres
  if($rowId){
   //préparation de la requete et des variables
   $sql = "UPDATE infos SET ".$columns[$colIndex]." = :colVal WHERE info_id = :rowId";
   $datas = array(":colVal"=>$colVal , ":rowId"=>$rowId);
  
   //exécution de la requete
   try{
     $req = $db->prepare($sql);
     $req->execute($datas);
     $msg = array('status'=>false
                  ,'msg'=>'Saisie enregistrꥠavec success !'
                  ,'debug'=>"");
   }catch(Exception $e){
     //erreur dans la requete
     $msg = array( 'status'=>true
                  ,'msg'=>'Erreur ! '.$e->getMessage() 
                  ,'debug'=>array("requete"=>$sql,"datas"=>$datas)
                 );
   }
  }else{
    //pas d'ID
    $msg = array('status'=>true
                ,'msg'=>"Erreur ! ID de ligne vide !!"
                ,'debug'=>$_POST);
  }  
   
// send data as json format
echo json_encode($msg);

Cordialement,
Jordane

Utilisateur anonyme · Answer 13 · 2016-11-16T14:29:41+0100

Réponse 13 / 13

Utilisateur anonyme
16 nov. 2016 à 14:29

Parfait ! Ça marche bien.
Merci beaucoup.

A bientôt !

Signaler

jordane45

Messages postés: 32277
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 3 mai 2021

346
16 nov. 2016 à 14:36

Tu n'oublieras pas de mettre le sujet en RESOLU
Merci.

Signaler

Utilisateur anonyme > jordane45

Messages postés: 32277
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 3 mai 2021

16 nov. 2016 à 15:09

Ok merci encore

Votre réponse