[AJAX] Modification "inline" de données avec AJAX

Version imprimable

15/09/2008, 20h06
lanner

[AJAX] Modification "inline" de données avec AJAX

Bonjour tout le monde,

Je m'intéresse depuis peu à ce tutorial :
http://olance.developpez.com/article...cation-inline/

Je ne suis pas un grand expert mais le zip fourni fonctionne parfaitement et cela me convient pour mes petites créations :)

Par contre l'explicatif est donné pour une seule table (inlinemod dans le tuto) avec plusieurs champs.

J'utilise des pages qui comportent plusieurs requêtes différentes , donc appel de plusieurs champs dans une seule page.

Est ce qu'il faut créer les fichiers sauverMod.php + inlinemod.js pour chaques tables ?

Merci pour vos réponses ^^
15/09/2008, 20h34
Kerod

Personnellement, vu comment la source est conçu je dirais que tu pourrais éviter tout ceci.
Une chose qui peut être faite c'est de rajouter une variable dans l'appel des fonctions sauverMod et inlineMod. Il pourrait être par exemple le nom de la table ou autre identifiant qui pourrait te permettre de différencier la table à mettre à jour. Enfin dans le fichier PHP tu fais ton test et la requête qui correspond.

Ca peut être une solution mais il y a beaucoup d'autres.
15/09/2008, 20h41
lanner

L'inconvenient pour moi est qu'une telle "modification" est au dessus de mes connaissances, si eventuellement une nouvelle source pouvait être concue cela pourrait tout autant servir à d'autres personnes :)
17/09/2008, 22h28
lanner

J'ai même fait quelques tests avec les appels du genre matable.monchamp pour appeler les 2 tables avec leur champs mais ca n'as pas fonctionné :?
01/10/2008, 14h36
albedo0

J'avais le même problème que toi que j'ai résolu en modifiant un peu le code :

I/ dans ta page web :

Code:

<td id="prenom-'.$res['id'].'" class="cellule" ondblclick="inlineMod('.$res['id'].', this, \'prenom\', \'texte\', \'nomtable\')">'.$res['prenom'].'</td>

II/ dans le script :
1. modifier toutes les lignes comme par exemple :

Code:

function inlineMod(id, obj, nomValeur, type, table)

Ligne : 116, 169, 182, 192

2. Modifier la requete get : ligne 220 : ajout de "+ "&table=" + table"

Code:

XHR.open("GET", "ajax/inlinemod/sauverMod.php?id=" + id + "&champ=" + nomValeur + "&valeur=" + escape(valeur) + "&type=" + type + "&table=" + table + ieTrick(), true);

III/ Recupérer la valeur de table dans le fichier de traitement.
Il reste plus qu'à créer une variable à placer dans ta requete SQL.

J'espère avoir répondu à ton problème...
01/10/2008, 18h00
lanner

Salut, merci pour ce super coup de pousse, jai bien réussi à comprendre pour les modification des fichiers principaux, cependant je n'ai pas compris la fin :

Citation:

III/ Recupérer la valeur de table dans le fichier de traitement.
Il reste plus qu'à créer une variable à placer dans ta requete SQL.

Je suppose qu'il s'agit de modifier le fichier sauverMod.php ? si oui la je ne sais pas vraiment ce que voulais m'expliquer :)
Si tu pouvais m'en dire plus super cool d'avance ^^

effectivement il s'agit de modifier le fichier sauverMod.php. J'ai modifié la syntaxe de la requete sql en sortant les variables du switch (ce qui me semble plus clair) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$table = mysql_real_escape_string($_GET['table']) ;
$champ = mysql_real_escape_string($_GET['champ']) ;
$valeur = mysql_real_escape_string($_GET['valeur']);
$id = intval($_GET['id']);
 
switch($_GET['type'])
{
    case 'texte':
    case 'texte-multi':
        $sql  = "UPDATE $table SET $champ = '$valeur' WHERE id='$id' " ;
        break;
 
    case 'nombre':
        $sql  = "UPDATE $table  SET $champ = '$valeur' WHERE id='$id' ";
        break;
 
    default:
        exit;
}

J'espère que ça va marcher... pour moi c'est nickel !

tu "nettoie" donc le fichier comme ceci ?
Code:

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 <?php include("connexion.php"); //Connexion à la base de données $connexion = mysql_connect($DB_HOST, $DB_USER, $DB_PASSWORD) or die(mysql_error()); mysql_select_db($DB_NAME, $connexion) or die(mysql_error()); //Construction de la requête en fonction du type de valeur $table = mysql_real_escape_string($_GET['table']) ; $champ = mysql_real_escape_string($_GET['champ']) ; $valeur = mysql_real_escape_string($_GET['valeur']); $id = intval($_GET['id']); switch($_GET['type']) { case 'texte': case 'texte-multi': $sql = "UPDATE $table SET $champ = '$valeur' WHERE id='$id' " ; break; case 'nombre': $sql = "UPDATE $table SET $champ = '$valeur' WHERE id='$id' "; break; default: exit; } //Exécution de la requête mysql_query($sql) or die(mysql_error()); mysql_close($connexion); ?>
Par contre doit y a voir un soucis avec la ligne , et je n'est pas compris pourquoi un $res

Code:

<td id="prenom-'.$res['id'].'" class="cellule" ondblclick="inlineMod('.$res['id'].', this, \'prenom\', \'texte\', \'nomtable\')">'.$res['prenom'].'</td>

cela ne m'affiche pas dans la case prénom

j'ai rectifié comme ceci qui s'affiche , se modifie mais ne sauvegarde pas :

Code:

<td id="prenom-<?php echo $user['id']; ?>" class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'prenom', 'texte', 'inlinmod')"><?php echo $user['prenom']; ?></td>

Par contre au debut de l'index.php cette partie est toujours valable ? car j'ai créé une table inlinemod2 fait le test , je n'ai plus de plantage juste que cela ne modifie pas le prenom ou j'ai mis this, 'prenom', 'texte', 'inlinemod2'
Code:

1 2 $sql = "SELECT * FROM `" . $DB_TABLE_NAME . "`"; $req = mysql_query($sql) or die(mysql_error());
Un peu perdu héhé, ce qui aurait au top c'est que tu post une modification complète partant de l'existant , pour toi cela devrait prendre que peu de temps ^^
Merci

Voici l'intégralité du fichier sauverMod.php, avec les commentaires pour t'expliquer les manips :

Vérification des variables envoyées, ne change pas.
Code:

1 2 3 4 5 6 7 8 9 10 11 <?php //On sort en cas de paramètre manquant ou invalide if(empty($_GET['id']) or empty($_GET['type']) or empty($_GET['champ']) or empty($_GET['valeur']) or !is_numeric($_GET['id']) or !in_array( $_GET['champ'], array('nom', 'prenom', 'adresse', 'code_postal', 'ville', 'enfants', 'email') )) { exit; }
Connexion à la base de donnée. J'ai mis personnelement les paramètres de connexion à la base dans le fichier configuration.php donc ici moi je modifie, mais pour toi tu ne touche à rien si cela fonctionnait déjà :
Code:

1 2 3 4 5 6 //Connexion à la base de données require('../../configuration.php'); $connect = mysql_connect($bddAdress, $bddUserName , $bddPassword) or die ("erreur de connexion MySQL"); mysql_select_db($bddBaseName,$connect) or die ("erreur de selection de base");
On prépare les données reçues en créant les variables qui seront utilisées pour la requête mysql (tu peux faire la même chose si tu veux) :
Code:

1 2 3 4 5 //Construction de la requête en fonction du type de valeur $table = mysql_real_escape_string($_GET['table']) ; $champ = mysql_real_escape_string($_GET['champ']) ; $valeur = mysql_real_escape_string($_GET['valeur']); $id = intval($_GET['id']);
Le switch permet de préparer la requête mysql en fonction du paramètre "type" :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 switch($_GET['type']) { case 'texte': case 'texte-multi': $sql = "UPDATE $table SET $champ = '$valeur' WHERE id='$id'" ; break; case 'nombre': $sql = 'UPDATE tice_profs '; $sql .= '` SET ' . mysql_real_escape_string($_GET['champ']) . '=' . intval($_GET['valeur']); $sql .= ' WHERE id=' . intval($_GET['id']); break; default: exit; }
Tout est prêt, on exécute la requête mysql :
Code:

1 2 3 4 5 //Exécution de la requête mysql_query($sql) or die(mysql_error()); mysql_close($connexion); ?>
-------------------------------------------------

Effectivement, tu as raison pour :

Code:

<td id="prenom-'.$res['id'].'" class="cellule" ondblclick="inlineMod('.$res['id'].', this, \'prenom\', \'texte\', \'nomtable\')">'.$res['prenom'].'</td>

J'ai utilisé dans mon script "$res " plutôt que la variable "$user" c'est pourquoi tu as une différence et j'ai tout mis en php plutôt que d'insérer des morceaux de codes uniquement... j'avais oublié de te le préciser et c'est vrai que ça change les choses...

Code:

<td id="prenom-<?php echo $user['id']; ?>" class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'prenom', 'texte', 'inlinmod')"><?php echo $user['prenom']; ?></td>

Ce que tu as mis semble correct sauf que dans le code que tu donne juste en dessus, la table que tu souhaites modifier s'appelle "inlinmod", je ne suis pas sur que ce soit correct !

Il faudrait donc que tu modifie ce passage :

inlineMod(<?php echo $user['id']; ?>, this, 'prenom', 'texte', 'inlinmod')

Salut, merci pour les explicatifs :)

Pour situer mon test voici les infos (j'ai gardé les fichiers d'origine pour le moment)

la base :
inlinemod
les tables :
inlinemod
champs :
id nom prenom adresse code_posta ville enfants email

inlinemod2
champ :
pays

Cela fonctionne si je met pour inlinemod :

Code:

<td id="prenom-<?php echo $user['id']; ?>" class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'prenom', 'texte', 'inlinemod')"><?php echo $user['prenom']; ?></td>

Mais ne sauvegarde pas si je met pour inlinemod2

Code:

<td id="pays-<?php echo $user['id']; ?>" class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'pays', 'texte', 'inlinemod2')"><?php echo $user['prenom']; ?></td>

Par contre ce que je ne comprend pas dans ton explicatif , c'est comment tu défini les différents champs inlinemod2, car le code appel que les champs défini pour inlinemod
Code:

1 2 3 4 5 6 7 8 9 10 //On sort en cas de paramètre manquant ou invalide if(empty($_GET['id']) or empty($_GET['type']) or empty($_GET['champ']) or empty($_GET['valeur']) or !is_numeric($_GET['id']) or !in_array( $_GET['champ'], array('nom', 'prenom', 'adresse', 'code_postal', 'ville', 'enfants', 'email') )) { exit; }
Comment fait on pour définir les autres champs de la table inlinemod2 (pour mon test je n'ai mis que prenom) et que cela sauvegarde :)

Sinon si tu as un serveur local est s'il y aurait possibilité je te fait une archive de tout ceci pour que tu puisse voir par toi même et me faire un correctif si besoin, je pourrais ainsi voir ce qui ne va pas, sinon je me contenterais de voir si tu trouve le "bug" ;)
Merci

Dans ton code :

Code:

<td id="prenom-<?php echo $user['id']; ?>" class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'prenom', 'texte', 'inlinemod')"><?php echo $user['prenom']; ?></td>

Dans cette exemple :
- prenom : correspond au nom du champ de la BDD,
- inlinemod : correspond au nom de la table,

A moins que je n'ai pas vraiment compris ta demande !

Si ton problème est lié à la vérification des données :
Code:

1 2 3 4 5 6 7 8 9 10 //On sort en cas de paramètre manquant ou invalide if(empty($_GET['id']) or empty($_GET['type']) or empty($_GET['champ']) or empty($_GET['valeur']) or !is_numeric($_GET['id']) or !in_array( $_GET['champ'], array('nom', 'prenom', 'adresse', 'code_postal', 'ville', 'enfants', 'email') )) { exit; }
Tu peux éventuellement essayer sans ce code pour tester et voir si cela vient de là..

Pour ce qui est de m'envoyer ton script ça m'arrange pas puisqu'il va falloir que je crée la base et tout par contre si tu veux, tu peux me créer un accès FTP et MYSQL temporaire et je regarde direct dessus, t'aura juste à supprimer le compte ou a modifier le mot de passe...

Salut,

Oui la demande est faite pour avoir 2 tables (ou plus) dans une meme bdd comme j'ai cité au début du post juste avant, c'est pour cela que j'ai fait l'explicatif , des noms (bdd, les tables , les champs)
la ou ca coince, c'est pour la 2eme table inlinemod2 avec un champ prenom (qui pourrait etre nommé pays)
Donc la ligne prenom j'ai placé

Code:

... this, 'prenom', 'texte', 'inlinemod2' ....

Et c'est la que je comprend pas comme tu fait appel à ce champ qui appartiens à la 2ème table, car le code d'appel ne concerne que la premiere table (inlinemod)
Code:

1 2 3 4 5 6 7 8 9 10 //On sort en cas de paramètre manquant ou invalide if(empty($_GET['id']) or empty($_GET['type']) or empty($_GET['champ']) or empty($_GET['valeur']) or !is_numeric($_GET['id']) or !in_array( $_GET['champ'], array('nom', 'prenom', 'adresse', 'code_postal', 'ville', 'enfants', 'email') )) { exit; }
Je vais te créer un accès ftp , sql pour que tu y vois plus clair et si tu as le temps de me le rendre opérationnel ;)
J'ai nommé le champs pays dans la table inlinemod2 et en fait le tableau n'affiche pas le contenu de la table

Code:

<td id="pays-<?php echo $user['id']; ?>" class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'pays', 'texte', 'inlinemod2')"><?php echo $user['pays']; ?></td>

Je t'ai transmis toutes les informations par MP :) merci d'avance

18/12/2008, 21h06
lanner

Resalut, je me permet juste de relancer mon post pour un léger détail que je n'arrive pas à trouver :)

Si ma table (champ id) porte un nom composé (autre que id) cela ne fonctionne plus, car j'ai des tables qui s'appel :

Citation:

newsletter_id
contact_id

Je ne vois vraiment pas quoi modifier pour que cela fonctionne ^^

Voici un chti coup de main à nouveau serait sympa ;)
18/12/2008, 21h11
Kerod

Ben tu remplaces tous les id par le nom de ton identifiant
18/12/2008, 21h27
lanner

En fait j'ai trouver le probleme

Dans le sauverMOD.php

Citation:

case 'texte-multi':
$sql = "UPDATE $table SET $champ = '$valeur' WHERE id = '$id' " ;

Le problème venait de la
20/12/2008, 14h41
lanner

Vu que j'ai un peu de temps pour mes tests , un autre léger soucis survient avec un textarea sur plusieurs lignes.

J'utilise un formulaire, on ecris sur plusieurs lignes, je stock en encodant dans la bdd, et pour l'affichage j'appel par :

Citation:

nl2br(stripslashes(urldecode($data['adresse'])));

et la forcement c'est plus compliqué pour en faire la modification inline, je suppose qu'il y a plusieurs ajouts à faire dans le .js et sauverMOD.php mais je coince :)

Si quelqu'un à une idée

modification inline

Citation:

Envoyé par albedo0

J'avais le même problème que toi que j'ai résolu en modifiant un peu le code :

I/ dans ta page web :

Code:

<td id="prenom-'.$res['id'].'" class="cellule" ondblclick="inlineMod('.$res['id'].', this, \'prenom\', \'texte\', \'nomtable\')">'.$res['prenom'].'</td>

II/ dans le script :
1. modifier toutes les lignes comme par exemple :

Code:

function inlineMod(id, obj, nomValeur, type, table)

Ligne : 116, 169, 182, 192

2. Modifier la requete get : ligne 220 : ajout de "+ "&table=" + table"

Code:

XHR.open("GET", "ajax/inlinemod/sauverMod.php?id=" + id + "&champ=" + nomValeur + "&valeur=" + escape(valeur) + "&type=" + type + "&table=" + table + ieTrick(), true);

III/ Recupérer la valeur de table dans le fichier de traitement.
Il reste plus qu'à créer une variable à placer dans ta requete SQL.

J'espère avoir répondu à ton problème...

Bjr Albedo, j'ai le même probleme que je n'arrive pas à résoudre via ton exemple:
voici mon code:
dans la page index.php:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $requete_resume = "SELECT `psychrosoft`.`restps`.resume FROM `psychrosoft`.`restps` WHERE `psychrosoft`.`restps`.jour=$res AND `psychrosoft`.`restps`.mois=$lemois AND `psychrosoft`.`restps`.annee=$lannee"; $resultat_resume = mysql_query($requete_resume)or die ('requête non executée6 car'.mysql_error().'.'); $resume = mysql_fetch_row($resultat_resume); $resum=($resume[0]=="0")?("."):($resume[0]); echo"<tr><td>".$res."</td><td id=\"".$res."\" style=\"vertical-align: center; text-align: left; font-size:12pt; font-family: 'LearningCurveProRegular', monotype corsiva, serif; cursor: pointer;\" "; echo 'ondblclick="inlineMod('.$res.', this, \'resume\', \'texte-multi\', \''.$lemois.'\', \''.$lannee.'\')">'; echo $resum."</td><td></td></tr>";
dans le script inlineMod.js: les lignes 116, 169, 182, 192, 220
Code:

1 2 3 4 5 function inlineMod(id, obj, nomValeur, type, mes, anio) sauverMod(id, obj, nomValeur, input.value, type, mes, anio); sauverMod(id, obj, nomValeur, input.value, type, mes, anio); function sauverMod(id, obj, nomValeur, valeur, type, mes, anio) XHR.open("GET", "sauverMod.php?id=" + id + "&champ=" + nomValeur + "&valeur=" + escape(valeur) + "&type=" + type + "&mes=" + mes + "&anio=" + anio + ieTrick(), true);
dans le script sauverMod.php:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 $DB_TABLE_NAME = "restps"; //On sort en cas de paramètre manquant ou invalide if(empty($_GET['id']) or empty($_GET['type']) or empty($_GET['champ']) or empty($_GET['valeur']) or !is_numeric($_GET['id'])) { exit; } switch($_GET['type']) { case 'texte': case 'texte-multi': $sql = 'UPDATE `'.$DB_TABLE_NAME; $sql .= '` SET ' . mysql_real_escape_string($_GET['champ']) . '="'; $sql .= mysql_real_escape_string($_GET['valeur']) . '" WHERE jour=' . intval($_GET['id']).'AND mois='.intval($_GET['mes']).'AND annee='.intval($_GET['anio']); break; default: exit; }
J'aimerais que vous m'aidiez à trouver ce qui ne va pas dans mon code, SVP