[AJAX] javascript-ajax & tableau html
Bonjour,
Je me suis mis au dev web il n'y a pas si longtemps, je suis en train de faire une application web en php, js, ajax, mysql. Mon niveau en HTML CSS est plutot bon, php ca va, et le reste tout juste d�butant.
Dans une des parties du projet, j'affiche le contenu de ma BDD dans un tableau HTML, et j'ai trouv� ce tuto qui me permet de faire ce dont j'ai besoin:
http://olance.developpez.com/article...cation-inline/
Permettre de modifier directement les donn�es affich�es dans ce tableau: en double-cliquant dans la case correspondante, un champ texte apparait � la place de la cellule du tableau, on �crit une nouvelle valeur et en appuyant sur ok ou quittant la cellule, cela enregistre ce nouveau champ sans recharger la page.
R�sultat du tuto ici: http://olance.developpez.com/article...emple/classes/
Le probl�me est que cela ne marche pas...m�me pas la partie changement en input quand on double clique dessus, c'est comme si je n'avais pas de js du tout. Et je ne comprend pas pourquoi, et ou peut se trouver le pb...
Je bloque dessus depuis un moment. Et je n'avance pas.
Maintenant, j'ai 2 fichiers: 1php, 1js:
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
| <?php session_start() ; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Ajout de groupe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="mod_pole.css" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="../banniere/banniere.css" />
<script type="text/javascript" src="inlinemod.js"></script>
</head>
<body>
<?php
if (!isset($_SESSION['pseudo'])) //session ouverte ?
{
header('Location: '.get_cfg_var("URL_HTTP")."/GDflux/index.php?erreur=authentification");
}
include("../banniere/banniere.php");
?>
<?php
$host = get_cfg_var("DBHost");
$user = get_cfg_var("DBUserW");
$pass = get_cfg_var("DBPwdW");
$bdd = get_cfg_var("DBName");
@mysql_connect($host,$user,$pass) l
or die("Impossible de se connecter au serveur");
@mysql_select_db("$bdd") // sélection
or die("Impossible de se connecter à la base de données");
$requete = "SELECT * FROM --BDD--";
try // récupération
{
$result = mysql_query($requete);
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}?>
<div id="ecran">
<table id="tab_equipe"BORDER="1" ALIGN="CENTER" CELLPADDING="10" CELLSPACING="1">
<caption>Modifier Pole</caption>
<thead><tr>
<th>Id</th>
<th>Nom</th>
</tr></thead>
<?php
while($user = mysql_fetch_assoc($result))
{
?>
<tbody><tr>
<td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'nom', 'nombre')">
<?php echo $user['id']; ?>
</td>
<td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'prenom', 'texte')">
<?php echo $user['nom']; ?>
</td>
</tr></tbody>
<?php
}
?>
</table>
</div>
</body>
</html> |
Et le fichier js, que j'ai recopi� du tuto d�crit mais j'ai compris le code.
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
|
//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;
}
};
}
//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 evenement.keyCode;
}
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;
} |
Des id�es ???
