[AJAX] Modification "inline" de données avec AJAX d'Olivier Lance

Version imprimable

Bonsoir
J'ai suivi votre guide afin de modifier directement mes données. Seulement la modification dans la base n'est pas effectuée...
Mon code de la page sauverMod.php est :

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
33
34
35
36
37
38
39
40
 
 <?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ées
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("inlinemod") or die(mysql_error);
 
// Construction de la requête en fonction du type de valeur
switch($_GET['type'])
{
    case 'texte':
    case 'texte-multi':
        $sql  = "UPDATE inline SET".mysql_real_escape_string($_GET['champ'])."=".mysql_real_escape_string($_GET['valeur'])." WHERE id=". intval($_GET['id']);
        break;
 
    case 'nombre':
        $sql  = "UPDATE inline SET".mysql_real_escape_string($_GET['champ'])."=".intval($_GET['valeur'])."WHERE id=".intval($_GET['id']);
        break;
 
    default:
        exit;
}
 
// Exécution de la requête
mysql_query($sql) or die(mysql_error());
 
mysql_close();
 
?>

31/10/2006, 10h37
denisC

Citation:

Envoyé par yagrasdemonde

Bonsoir
J'ai suivi votre guide afin de modifier directement mes données. Seulement la modification dans la base n'est pas effectuée...

C'est à dire, plus précisement? La page PHP est bien appellée? La requete SQL aussi? A quel niveau est-ce que cela ne fonctionne pas?

4 pièce(s) jointe(s)

La page sauverMod.php est bien appelée. Lorsque je modifie une donnée parmi les coordonnées sur la page celle ci est bien changée apres la pression de la touche Entrée mais dans la base rien n'est modifié
Je vous joint mes fichiers:

index.php

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<?php
// Connexion à la base de données
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("inlinemod") or die(mysql_error);
 
$sql = 'SELECT * FROM inline';
$result = mysql_query($sql) or die(__LINE__.mysql_error().$sql);
 
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
 
    <title>Modification "inline" de données grâce à XMLHTTPRequest</title>
 
    <link rel="StyleSheet" type="text/css" href="index.css"/>
    <script type="text/javascript" src="inlinemod.js"></script>
</head>
 
<body>
    <h1>Utilisateurs</h1>
 
 
    <table id="table-utilisateurs">
        <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Adresse</th>
            <th>Code Postal</th>
            <th>Ville</th>
            <th>Enfants</th>
            <th>Email</th>
        </tr>
 
        <?php
        while($user = mysql_fetch_assoc($result))
        {
        ?>
            <tr>
                <td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'nom', 'texte')">
                    <?php echo $user['nom']; ?>
                </td>
 
                <td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'prenom', 'texte')">
                    <?php echo $user['prenom']; ?>
                </td>
 
                <td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'adresse', 'texte-multi')">
                    <?php echo $user['adresse']; ?>
                </td>
 
                <td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'code_postal', 'texte')">
                    <?php echo $user['code_postal']; ?>
                </td>
 
                <td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'ville', 'texte')">
                    <?php echo $user['ville']; ?>
                </td>
 
                <td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'enfants', 'nombre')">
                    <?php echo $user['enfants']; ?>
                </td>
 
                <td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'email', 'texte')">
                    <?php echo $user['email']; ?>
                </td>
            </tr>
        <?php
        }
        ?>
    </table>
 
</body>
</html>
 
<?php
 
        mysql_close();
 
?>

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 <?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ées
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("inlinemod") or die(mysql_error);
 
// Construction de la requête en fonction du type de valeur
switch($_GET['type'])
{
    case 'texte':
    case 'texte-multi':
        $sql  = "UPDATE inline SET".mysql_real_escape_string($_GET['champ'])."=".mysql_real_escape_string($_GET['valeur'])." WHERE id=". intval($_GET['id']);
        break;
 
    case 'nombre':
        $sql  = "UPDATE inline SET".mysql_real_escape_string($_GET['champ'])."=".intval($_GET['valeur'])."WHERE id=".intval($_GET['id']);
        break;
 
    default:
        exit;
}
 
// Exécution de la requête
mysql_query($sql) or die(mysql_error());
 
mysql_close();
 
?>

inlinemod.js

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
 
// retourne un objet xmlHttpRequest.
// méthode compatible entre tous les navigateurs (IE/Firefox/Opera)
function getXMLHTTP()
{
    var xhr = null;
    if(window.XMLHttpRequest)
    { // Firefox et autres
        xhr = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    { // Internet Explorer
        try
        {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e1)
            {
                xhr = null;
            }
        }
    }
    else
    { // XMLHttpRequest non supporté par le navigateur
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
    }
 
    return xhr;
}
 
 
//Fonction renvoyant le code de la touche appuyée lors d'un événement clavier
function getKeyCode(evenement)
{
    for (prop in evenement)
    {
        if(prop == 'which')
        {
            return evenement.which;
        }
    }
 
    return event.keyCode;
}
 
 
//Suppression des espaces/sauts de ligne inutiles (http://www.breakingpar.com/bkp/home.nsf/0/87256B280015193F87256C0C0062AC78)
function trim(value) {
   var temp = value;
   var obj = /^(\s*)([\W\w]*)(\b\s*$)/;
   if (obj.test(temp)) { temp = temp.replace(obj, '$2'); }
   var obj = /  /g;
   while (temp.match(obj)) { temp = temp.replace(obj, " "); }
   return temp;
}
 
//Fonction donnant la largeur en pixels du texte donné (merci SpaceFrog !)
function getTextWidth(texte)
{
	//Valeur par défaut : 150 pixels
	var largeur = 150;
 
	if(trim(texte) == "")
	{
		return largeur;
	}
 
	//Création d'un span caché que l'on "mesurera"
	var span = document.createElement("span");
	span.style.visibility = "hidden";
	span.style.position = "absolute";
 
	//Ajout du texte dans le span puis du span dans le corps de la page
	span.appendChild(document.createTextNode(texte));
	document.getElementsByTagName("body")[0].appendChild(span);
 
	//Largeur du texte
	largeur = span.offsetWidth;
 
	//Suppression du span
	document.getElementsByTagName("body")[0].removeChild(span);
	span = null;
 
	return largeur;
}
 
 
//Fonction renvoyant une valeur "aléatoire" pour forcer le navigateur (ie...)
//à envoyer la requête de mise à jour
function ieTrick(sep)
{
	d = new Date();
	trick = d.getYear() + "ie" + d.getMonth() + "t" + d.getDate() + "r" + d.getHours() + "i" + d.getMinutes() + "c" + d.getSeconds() + "k" + d.getMilliseconds();
 
	if (sep != "?")
	{
		sep = "&";
	}
 
	return sep + "ietrick=" + trick;
}
 
 
 
//On ne pourra éditer qu'une valeur à la fois
var editionEnCours = false;
 
//variable évitant une seconde sauvegarde lors de la suppression de l'input
var sauve = false;
 
//Fonction de modification inline de l'élément double-cliqué
function inlineMod(id, obj, nomValeur, type)
{
	if(editionEnCours)
	{
		return false;
	}
	else
	{
		editionEnCours = true;
		sauve = false;
	}
 
	//Objet servant à l'édition de la valeur dans la page
	var input = null;
 
	//On crée un composant différent selon le type de la valeur à modifier
	switch(type)
	{
		//Valeur de type texte ou nombre
		case "texte":
		case "nombre":
			input = document.createElement("input");
			break;
 
		//Valeur de type texte multilignes
		case  "texte-multi":
			input = document.createElement("textarea");
			break;
	}
 
	//Assignation de la valeur
	if (obj.innerText)
		input.value = obj.innerText;
	else
		input.value = obj.textContent;
 
	input.value = trim(input.value);
 
	//On lui donne une taille un peu plus large que le texte à modifier
	input.style.width  = getTextWidth(input.value) + 30 + "px";
 
	//Remplacement du texte par notre objet input
	obj.replaceChild(input, obj.firstChild);
 
	//On donne le focus à l'input et on sélectionne le texte qu'il contient
	input.focus();
	input.select();
 
	//Assignation des deux événements qui déclencheront la sauvegarde de la valeur
 
	//Sortie de l'input
	input.onblur = function sortir()
	{
		sauverMod(id, obj, nomValeur, input.value, type);
		delete input;
	};
 
	//Appui sur la touche Entrée
	input.onkeydown = function keyDown(event)
	{
                if (!event&&window.event)
                {
                    event = window.event;
                }
		if(getKeyCode(event) == 13)
                  {
			sauverMod(id, obj, nomValeur, input.value, type);
			delete input;
		}
	};
}
 
 
//Objet XMLHTTPRequest
var XHR = null;
 
//Fonction de sauvegarde des modifications apportées
function sauverMod(id, obj, nomValeur, valeur, type)
{
	//Si on a déjà sauvé la valeur en cours, on sort
	if(sauve)
	{
		return false;
	}
	else
	{
		sauve = true;
	}	
 
	//Si l'objet existe déjà on abandonne la requête et on le supprime
	if(XHR && XHR.readyState != 0)
	{
		XHR.abort();
		delete XHR;
	}
 
	//Création de l'objet XMLHTTPRequest
	XHR = getXMLHTTP();
 
	if(!XHR)
	{
		return false;
	}
 
	//URL du script de sauvegarde auquel on passe la valeur à modifier
	XHR.open("GET", "sauverMod.php?id=" + id + "&champ=" + nomValeur + "&valeur=" + escape(valeur) + "&type=" + type + ieTrick(), true);
 
	//On se sert de l'événement OnReadyStateChange pour supprimer l'input et le replacer par son contenu
	XHR.onreadystatechange = function()
	{
		//Si le chargement est terminé
		if (XHR.readyState == 4)
		{
			//Réinitialisation de la variable d'état d'édition
			editionEnCours = false;
 
			//Remplacement de l'input par le texte qu'il contient
			obj.replaceChild(document.createTextNode(valeur), obj.firstChild);
		}
	}
 
	//Envoi de la requête
	XHR.send(null);
}

Structure de ma Base :
inlinemod.sql

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
-- Base de données: `inlinemod`
 
-- Structure de la table `inline`
-- 
 
CREATE TABLE `inline` (
  `id` int(11) NOT NULL default '0',
  `nom` varchar(255) NOT NULL default '',
  `prenom` varchar(255) NOT NULL default '',
  `adresse` tinytext NOT NULL,
  `code_postal` varchar(5) NOT NULL default '',
  `ville` varchar(255) NOT NULL default '',
  `enfants` int(11) NOT NULL default '0',
  `email` varchar(255) NOT NULL default '',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
 
-- 
-- Contenu de la table `inline`
-- 
 
INSERT INTO `inline` VALUES (1, 'DUPOND', 'Paul', '10 Rue Jean Jaures', '75002', 'PARIS', 2, 'dupond.paul@fai.fr');

17/12/2006, 11h36
aztec

J'ai aussi le même problème

le fichier "sauverMod.php" est bien appelé mais les variables
GET['valeur'], etc. ne sont plus définies après l'appel (c'est comme si elles n'existaient pas...) ; la modification se fait pourtant bien visuellement au niveau du formulaire mais pas dans la base !
pourriez-vous me dire pourquoi cela ne fonctionne pas avec le script ?
merci
21/02/2007, 01h31
Bestiol

Bonjour,

désolé pour cette correction tardive... plusieurs personnes m'ont fait remonter un problème au sujet de mon script mais malheureusement, pour des raisons personnelles, je n'ai pas eu le temps de m'y pencher...

Le problème est normalement résolu à présent, et j'ai mis à jour l'article pour qu'il reflète les corrections apportées.
Il s'agissait d'un problème dans sauverMod.php, où j'avais écrit 'mysql_error' au lieu de 'mysql_error()' :scarymov:

J'ai ajouté dans mon article un lien vers un zip contenant les fichiers qui sont opérationnels en local chez moi.

Encore désolé, et bonne prog' !
Olivier
14/09/2008, 19h38
lanner

bonjour,

J'ai trouvé la source en zip que j'ai installé en local tout fonctionne sauf le final lorsque je valide un changement , dans la base de donnée rien ne change ... pourtant je n'ai rien touché au zip , juste créé la table comme cité et fait un include des infos de connexion.
Si vous avez une solution merci ;)

Le lien de la source :
http://olance.developpez.com/article...cation-inline/

J'ai beau recommencer l'operation xx fois , impossible de sauvegarder la modification ... :(
15/09/2008, 00h04
lanner

Je viens de trouver le problème qui était tout bête, melange dans l'appel des variables de la bdd , à priori entre index.php et sauverMod.php j'ai du faire un appel différent (je n'ai pas encore testé plus loin pourquoi)

index.php

Citation:

mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die(mysql_error());
mysql_select_db(DB_NAME) or die(mysql_error());

sauverMod.php

Citation:

$connexion = mysql_connect($DB_HOST, $DB_USER, $DB_PASSWORD) or die(mysql_error());
mysql_select_db($DB_NAME, $connexion) or die(mysql_error());

(Si je met comme dans l'index.php cela ne fonctionne pas)

Pour les variables il a fallu les 2

Citation:

$DB_HOST = "localhost";
$DB_USER = "root";
$DB_PASSWORD = "pass";
$DB_NAME = "db";
$DB_TABLE_NAME = "table";
?>
<?php
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASSWORD', 'pass');
define('DB_NAME', 'db');
define('DB_TABLE_NAME', 'table');

Il est tard et j'ai quand même réussi avant d'aller au lit :)
Désolé pour les posts répétitifs
15/09/2008, 00h06
Kerod

Salut,

Peux-tu nous donner l'erreur renvoyée par AJAX ?? Tu peux l'obtenir en utilisant le plugin Firebug avec Firefox
15/09/2008, 16h52
lanner

Salut, je ne sais pas trop utiliser firebug, mais le problème n'est pas si mechant car comme expliqué j'ai changé les info de connexion et cela fonctionne mais il est vrai que ce n'est pas "clean"

Ben pourquoi tu n'as pas modifier l'instruction, dans sauverMod :

Code:

1
2
$connexion = mysql_connect($DB_HOST, $DB_USER, $DB_PASSWORD) or die(mysql_error());
    mysql_select_db($DB_NAME, $connexion) or die(mysql_error());

par

Code:

1
2
$connexion = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die(mysql_error());
    mysql_select_db(DB_NAME, $connexion) or die(mysql_error());

puis garder que cette déclaration :

Code:

1
2
3
4
5
define('DB_HOST',       'localhost');
define('DB_USER',       'root');
define('DB_PASSWORD',   'pass');
define('DB_NAME',       'db');
define('DB_TABLE_NAME', 'table');

15/09/2008, 19h29
lanner

Parce qu'au départ j'ai simplement mis l'archive qui est donnée comme cela sur les 2 fichiers :

Citation:

$connexion = mysql_connect($DB_HOST, $DB_USER, $DB_PASSWORD) or die(mysql_error());
mysql_select_db($DB_NAME, $connexion) or die(mysql_error());

Par contre je profite du post dites moi si je dois en créer un au cas ou :

Si l'on souhaite faire des modification sur une page qui comporte plusieurs requêtes différentes (plusieurs tables), quelle est la méthode ? car cet exemple n'est valable que pour une seule requête sur une table spécifique

Merci d'avance
15/09/2008, 19h50
Kerod

Tout dépend du/des champ(s) associé(s). Si c'est le même alors tu rajoutes la requête à la suite. Si non ben il faut faire un test pour savoir quel champ et effectué la requête.

Si je me souviens bien, de la manière que c'est codé ça doit être faisable.

Enfin, je te suggère d'ouvrir un nouveau sujet pour exposer ton problème d'autant plus que celui-ci est marqué résolu et personne ne se donnera la peine de le lire instinctivement.
02/12/2009, 17h11
Guppy

Bonjour,

Je trouve en téléchargement qu'un zip qui ne contient pas les nouvelles suggestions du tutoriel - est-ce que je n'ai pas bien regardé ou....?

J'ai essayé d'adapter les scripts avec les class, regroupement des scripts dans un répertoire /scripts etc. mais je rencontre toujours une erreur avec la ligne suivante d'index.php :

Code:

foreach(glob('./scripts/inlinemod.class.*.js') as $fichier)

Je pense qu'il manque un "e" à la fin de inlinemod ?
Mais toujours erreur même si je corrige cela:
Warning: Invalid argument supplied for foreach() in /index.php on line 16

Merci
30/05/2011, 17h47
drannoc

bonjour,
je ne comprend pas pourquoi la variable DB_TABLE_NAME ne passe pas de index.php à sauveMod.php
comment la faire passer proprement.
j'ai fait un script qui avec un select permet de choisir la table a modifier.
Pour la premiere partie, ça marche la bonne table est affichée.
Par contre dans sauverMod.php la variable est vide.
A la base le script sert a modifier une table depuis index en passant par sauverMod.php via inlinemode.js ( si j'ai bien compris ).
Merci de m'aider