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
| <?php
session_start();
header('Content-type: text/html; charset=ISO-8859-1');
try
{
$bdd = new PDO('mysql:host=localhost;dbname=xxx', 'root', '');
$bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
$result = $bdd->prepare("SELECT * FROM ajax_tableau");
$result->execute();
?>
<script type="text/javascript">
<!--
function image()
{
document.getElementById('load').style.display="none";
}
function maFonctionAjax(lindex, pseudo,valeur)
{
//========version reduite ne fait qu envoyer===========
var MonAjax;
if (window.XMLHttpRequest){ MonAjax = new XMLHttpRequest();}
else if (window.ActiveXObject) {MonAjax = new ActiveXObject('Microsoft.XMLHTTP');}
else {
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
MonAjax = false; }
MonAjax.open('POST',"ajax_tableau_pdo.php",true);
MonAjax.onreadystatechange = function()
{
if (MonAjax.readyState == 4 && MonAjax.status==200)
{
document.getElementById('LeRetourL').innerHTML=''+MonAjax.responseText+'';
setTimeout("image()", 2000);
}
else{ document.getElementById('load').style.display="inline"; }
}
MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
MonAjax.send('lindex='+lindex+'&pseudo='+pseudo+'&valeur='+valeur);
}
/* =========================================== */
//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;
}
//On ne pourra éditer qu'une valeur à la fois
var editionEnCours = false;
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 de modification inline de l'élément double-cliqué
function Lajax(id, obj, nomValeur)
{
if(editionEnCours)
{
return false;
}
else
{
editionEnCours = true;
}
//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
input = document.createElement("input");
//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);
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); delete input; }
}
}
//Fonction de sauvegarde des modifications apportées
function sauverMod(id, obj, nomValeur, valeur)
{
/* id champ valeur */
editionEnCours = false;
maFonctionAjax(id, nomValeur,valeur);
obj.replaceChild(document.createTextNode(valeur), obj.firstChild);
}
</script>
<h1>Liste d'utilisateurs</h1>
<div qlass='centre10'>
<img src='x_logos/ajaxloader.gif' style='visibility:hidden' id='load' name='load' />
<div id='LeRetourL' class='LeRetourL' style='visibility:visible'>
</div>
<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 ($row = $result->fetch())
{
echo ("<tr><td id='nom-".$row['id']."' class='cellule' ondblclick='Lajax(".$row['id'].", this, \"nom\")'>".$row['nom']."</td>");
echo ("<td id='prenom-".$row['id']."' class='cellule' ondblclick='Lajax(".$row['id'].", this, \"prenom\")'>".$row['prenom']."</td>");
echo ("<td id='adresse-".$row['id']."' class='cellule' ondblclick='Lajax(".$row['id'].", this, \"adresse\")'>".$row['adresse']."</td>");
echo ("<td id='cp-".$row['id']."' class='cellule' ondblclick='Lajax(".$row['id'].", this, \"code_postal\")'>".$row['code_postal']."</td>");
echo ("<td id='ville-".$row['id']."' class='cellule' ondblclick='Lajax(".$row['id'].", this, \"ville\")'>".$row['ville']."</td>");
echo ("<td id='enfants-".$row['id']."' class='cellule' ondblclick='Lajax(".$row['id'].", this, \"enfants\")'>".$row['enfants']."</td>");
echo ("<td id='email-".$row['id']."' class='cellule' ondblclick='Lajax(".$row['id'].", this, \"email\")'>".$row['email']."</td></tr>");
}
$bdd=NULL;
?>
</table>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id='info'></div>
</body></html> |
[AJAX] Cellules d'un tableau modifiées avec Ajax
Répondre avec citation
Partager