Bonjour à tous,
J'ai utilisé ce topic pour ajouter un select au concept de modification inline :
http://www.developpez.net/forums/sho...d.php?t=371303
Tout fonctionne très bien, mise à part une petite chose que je n'arrive pas à résoudre.
J'arrive à récupérer ce que je souhaite (noms de clubs de sport à partir d'une table), et à les mettre dans la liste, mais sur le onchange de la liste, donc lorsque je sélectionne le nom du club que je souhaite, il m'enregistre la valeur et non le texte de l'option.
La valeur est l'id du club et le texte est son nom.
Lorsque je remplace la valeur de l'option par le nom du club au lieu de l'id, une erreur est renvoyée.
Erreur de syntaxe près de 'Chartres WHERE id=1' à la ligne 1
lorsque le nom du club est MSD Chartres
et
Champ 'Mainvilliers' inconnu dans field list
lorsque le nom du club est Mainvilliers
Voici l'ensemble de mon code :
index.php
inlinemod.js
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
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 <?php // Connexion à la base de données mysql_connect("localhost","benji","benji") or die(mysql_error()); mysql_select_db("inline") or die(mysql_error()); $sql = 'SELECT * FROM `inlinemod`'; $result = mysql_query($sql) or die(__LINE__.mysql_error().$sql); /// Listing des scripts JS disponibles ///////////////////////////////////////////////////////////// $scripts = array(); $i = 0; foreach(glob('./script/inlinemod.class.*.js') as $fichier) { $scripts[$i] = $fichier; $i++; } ///////////////////////////////////////////////////////////////////////////////////////////////////// ?> <!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="css/style.css"/> <script type="text/javascript" src="./script/utils.js"></script> <?php //Inclusion des fichiers javascript de classes foreach($scripts as $script) { print '<script type="text/javascript" src="' . $script . '"></script>'; } ?> <script type="text/javascript" src="./script/inlinemod.js"></script> <?php function construisTableauJS($tableauPHP, $nomTableauJS){ echo $nomTableauJS." = new Array();"; for($i = 0; $i < count($tableauPHP); $i++){ if(!is_array($tableauPHP[$i])){ echo $nomTableauJS."[".$i."] = '".$tableauPHP[$i]."';"; } else{ construisTableauJS($tableauPHP[$i], $nomTableauJS."[".$i."]"); } } return; } function listeEquipes() { $sql2 = 'SELECT * FROM `equipes`'; $result2 = mysql_query($sql2) or die(__LINE__.mysql_error().$sql2); $nbEquipes = mysql_num_rows($result2); $j = 0; while($tmp = mysql_fetch_assoc($result2)) { $tab[$j][0] = $tmp["id"] ; $tab[$j][1] = $tmp["nom"] ; $j++; } return $tab; } $listeEquipes = listeEquipes() ; echo "<script type='text/javascript'>" ; construisTableauJS($listeEquipes, "listeEquipesJS") ; echo "</script>" ; ?> </head> <body> <h1>Utilisateurs</h1> <div id="erreur"></div> <br/> <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> <th>Equipe</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', 'TexteMulti')"> <?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> <td class="cellule" ondblclick="inlineModTab(<?php echo $user['id']; ?>, this, listeEquipesJS,'equipe', 'ListeDeroulante')"> <?php echo $user['equipe']; ?> </td> </tr> <?php } ?> </table> </body> </html> <?php mysql_close(); ?>
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
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 //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, nomChamp, classe) { if(editionEnCours) { return false; } else { editionEnCours = true; sauve = false; } //Création de l'objet dont le nom de classe est passé en paramètre champ = eval('new ' + classe + '();'); //Assignation des différentes propriétés champ.valeur = obj.innerText ? obj.innerText : obj.textContent; champ.valeur = trim(champ.valeur); champ.id = id; champ.nomChamp = nomChamp; //Remplacement du texte par notre objet input champ.remplacerTexte(obj, sauverMod); //"Activation" du champ (focus, sélection ou autres...) champ.activerChamp(); } function inlineModTab(id, obj, tab, nomChamp, classe) { if(editionEnCours) return false; else { editionEnCours = true; sauve = false; } champ = eval('new ' + classe + '();') ; champ.valeur = obj.innerHTML ? obj.innerHTML : obj.textContent ; champ.valeur = trim(champ.valeur) ; champ.id = id ; champ.nomChamp = nomChamp ; champ.remplacerTexte(obj, sauverMod, tab) ; champ.activerChamp() ; } //Objet XMLHTTPRequest var XHR = null; //Fonction de sauvegarde des modifications apportées function sauverMod() { //Si on a déjà sauvé la valeur en cours, on sort if(sauve) { return false; } else { sauve = true; } //Vérification d'erreur if(champ.erreur()) { document.getElementById("erreur").innerHTML = champ.texteErreur; sauve = false; return false; } //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 requête à exécuter XHR.open("GET", "sauverMod.php?champ=" + escape(champ.nomChamp) + "&valeur=" + escape(champ.getValeur()) + "&echap=" + champ.echaperValeur() + "&id=" + champ.id + 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) if(!XHR.responseText) { //Réinitialisation de la variable d'état d'édition editionEnCours = false; //Sortie du mode d'édition champ.terminerEdition(); //Réinitialisation de l'affichage d'erreur document.getElementById("erreur").innerHTML = ""; return true; } else //S'il y a une réponse texte, c'est une erreur PHP { //Affichage de l'erreur document.getElementById("erreur").innerHTML = XHR.responseText; sauve = false; return false; } } //Envoi de la requête XHR.send(null); }
inlinemod.class.listeDeroulante.js
sauverMod.php
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
53
54
55
56
57
58
59
60
61
62
63
64 var liste = null ; function ListeDeroulante() { this.id = -1 ; this.valeur = "" ; this.nomChamp = "" ; this.parent = null ; this.texteErreur = "" ; } ListeDeroulante.prototype.remplacerTexte = function (parent, sauvegarde, tab) { if (!parent || !sauvegarde) return false ; else this.parent = parent ; liste = document.createElement("select") ; liste.appendChild(document.createElement("option")) ; var k ; for (i = 0 ; i < tab.length ; i++) { if (navigator.appName == "Microsoft Internet Explorer") { k = new Option(tab[i][1],tab[i][0]); liste.add(k); } else { var k = document.createElement("option"); k.value = tab[i][0] ; k.text = tab[i][1] ; liste.appendChild(k) ; } } liste.onchange = function() { sauvegarde() ; } ; parent.replaceChild(liste, parent.firstChild) ; } ListeDeroulante.prototype.activerChamp = function() { liste.focus() ; } ListeDeroulante.prototype.getValeur = function() { return liste.value ; } ListeDeroulante.prototype.getTexte = function() { return liste.selectedIndex.text ; } ListeDeroulante.prototype.terminerEdition = function() { this.parent.replaceChild(document.createTextNode(liste.options[liste.selectedIndex].text), this.parent.firstChild) ; delete liste ; } ListeDeroulante.prototype.echaperValeur = function() { return "false" ; } ListeDeroulante.prototype.erreur = function() { if (this.getValeur() == "") { this.texteErreur = "Aucune saisie effectuée !" ; return true ; } else return false ; }
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 <?php //On sort en cas de paramètre manquant ou invalide if(!isset($_GET['champ']) or empty($_GET['champ']) or !isset($_GET['valeur']) or (empty($_GET['valeur']) and ($_GET['valeur'] != 0)) or !isset($_GET['echap']) or empty($_GET['echap']) or !isset($_GET['id'])) { print "Erreur dans les paramètres fournis"; exit; } require('common-top.php'); //Construction de la requête $champ = $_GET['champ']; $valeur = $_GET['valeur']; $id = $_GET['id']; $sql = "UPDATE `" . DB_TABLE_NAME . "` SET $champ="; //Il faut éventuellement formater la valeur fournie if($_GET['echap'] == "true") { $valeur = mysql_real_escape_string($valeur); $sql .= "'$valeur'"; } else $sql .= $valeur; $sql .= " WHERE id=$id"; //Exécution de la requête mysql_query($sql) or die("Erreur BDD : " . mysql_error()); require('common-bottom.php'); ?>
Si vous souhaitez plus d'informations, n'hésitez pas
Je vous remercie
Ben
Partager