Posez votre question Signaler

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

-
PHP Posez votre question Signaler
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);
            }
          }   
        });
  });
});
Afficher la suite 

Votre réponse

Répondre au sujet

13 réponses

Signaler Commenter la réponse de jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
0
Merci
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



Commenter la réponse de jordane45
Signaler Commenter la réponse de Utilisateur anonyme
0
Merci
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,
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
 -
C'est le bon id et la bonne colonne ?
Commenter la réponse de Utilisateur anonyme
Signaler Commenter la réponse de Utilisateur anonyme
0
Merci
Oui.
Les deux cellules ont le même id.
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
 -
Dans ton php... C'est quoi cette ligne 18 ??
Commenter la réponse de Utilisateur anonyme
Signaler Commenter la réponse de Utilisateur anonyme
0
Merci
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 Commenter la réponse de jordane45
jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
 -
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 ?
Commenter la réponse de Utilisateur anonyme
Signaler Commenter la réponse de Utilisateur anonyme
0
Merci
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 Commenter la réponse de jordane45
jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
 -
e INDEX = 0 c'est bon ? ça correspond bien à la bonne cellule ou pas ?
Commenter la réponse de Utilisateur anonyme
Signaler Commenter la réponse de Utilisateur anonyme
0
Merci
Oui oui
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
 -
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 ???
Commenter la réponse de Utilisateur anonyme
Signaler Commenter la réponse de Utilisateur anonyme
0
Merci
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 Commenter la réponse de jordane45
jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
 -

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..
Commenter la réponse de Utilisateur anonyme
Signaler Commenter la réponse de Utilisateur anonyme
0
Merci
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 Commenter la réponse de jordane45
jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
 -
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
Commenter la réponse de Utilisateur anonyme
Signaler Commenter la réponse de Utilisateur anonyme
0
Merci
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 Commenter la réponse de jordane45
jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
 -
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.....
Commenter la réponse de Utilisateur anonyme
Signaler Commenter la réponse de Utilisateur anonyme
0
Merci
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 !
Commenter la réponse de Utilisateur anonyme
Signaler Commenter la réponse de jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
0
Merci

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
Commenter la réponse de jordane45
Signaler Commenter la réponse de jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
0
Merci
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                                                                 
Commenter la réponse de jordane45
Signaler Commenter la réponse de Utilisateur anonyme
0
Merci
Parfait ! Ça marche bien.
Merci beaucoup.

A bientôt !
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
 -
Tu n'oublieras pas de mettre le sujet en RESOLU
Merci.
Signaler Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme > jordane45
Messages postés
23584
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
 -
Ok merci encore
Commenter la réponse de Utilisateur anonyme

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.