[Prototype] Modification inline rechargement [Résolu]

Mister Shell · 27/07/2007, 15h22

Bonjour tout le monde, j'ai débuté cette semaine avec l'apprentissage du javascript et dans la foulée, j'ai suivi l'excellent tuto d'Olivier Lance.
Après un peu d'adaptation de codes, tout fonctionne...

sauf que l'input ne disparaît pas après appui sur la touche Entrée ou clic en dehors.
Par contre, la bdd est bien mise à jour si touche Entrée ou clic.

Je crois bien que la fonction "terminerEdition" bloque, mais je ne vois pas où.

extrait du fichier inlinemod.class.texte.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//Fonction de sortie du mode d'édition
Texte.prototype.terminerEdition = function ()
{
	this.parent.replaceChild(document.createTextNode(input.value), this.parent.firstChild);
	delete input;
}

extrait du fichier 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
//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);
}

Edit du 30/07/07 : J'ajoute mon code php qui appelle tous les scripts, mais je ne vois s'il peut être la source de mon problème :

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
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
 
<?php
		// Recherche d'une session existante
		session_start();
 
		// Si pas de session ouverte, tentative d'intrusion
		if(!$_SESSION['prénom'])
 
		{
			echo '<h1>Voyou ! Vous n\'êtes pas authentifié.</h1>';
?>
<!-- on renvoie automatiquement à la page de login -->
<script language="javascript">
//<![CDATA[
function redirect() {
document.location.href= '../../administration/';
}
 
setTimeout('redirect()',3000);
//]]>	
</script>
<?php
		}
 
		// Si session ouverte, déroulement de la page
		else
		{
 
 
	/// Listing des classes disponibles ////////////////////////////////////////////////////////////////////////////////////////
	$scripts = array();
	$i = 0;
 
	foreach(glob('../../administration/moygen/scripts/inlinemod.class.*.js') as $fichier)
	{
		$scripts[$i] = $fichier;
		$i++;
	}
	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
?>
 
<html>
	<head>
		<title>General Management </title>
		<style type="text/css" media="screen"> 
			@import url("../../styles/style.css");
		</style>
		<style type="text/css">
		#main {width: 100%; text-align: left; border: none; left: 10px;}
		#users {border: 1; font-size: 11px; width: 98%; }
		#erreur {color: #F00; font-weight: bold; border: none; width: 100%; height: 20px;}
		td.numeros {text-align: center; cursor: pointer;}
		img {border: none;}
		a:link {color: #005da8; font-weight: normal;}
		a:visited {color: #005da8; font-weight: normal;}
		a:hover {color: #ff4500; font-weight: normal;}
		th {line-height: 2; text-align: center; font-weight: bold; font-size: 1.5em;}
		tr {line-height: 2;}
		td.cellule{cursor: pointer;}
		thead,tfoot {background: #c0c0c0;}
		input {background: #fff; width: 100%; font-size: 10px;}
		</style>
		<script type="text/javascript" src="../../administration/moygen/scripts/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="../../administration/moygen/scripts/inlinemod.js"></script>
	</head>
 
 
<body>
<?php
 
	// Script de contrôle du site
		require_once('../../ip.php'); 
 
	// Fonction pour alterner la couleur de fond des lignes du tableau
		require('../../genfun.php');
 
 
?>
<div id="header">
		<h1><a id="alegal" href="../../administration/moygen/" target="_self">Online General Management Tools</a> &#124; Phone Book </h1>
	</div>
	<br />
 
	<h2>Gestion de l'Annuaire des collaborateurs Single Risk</h2><br />
 
	<!-- Div qui affiche les messages d'erreur de saisie ou de résultat -->
	<div id="erreur"></div><br />
 
	<div id="main">	
	<!-- Tableau affichant les infos des collaborateurs Single Risk -->
	<table id="users">
		<!-- Entête de tableau -->
		<thead>
			<tr>
				<th>Nom</th>
				<th>Prénom</th>
				<th>Fonction</th>
				<th>Département</th>
				<th>Tel. #1</th>
				<th>Tel. #2</th>
				<th>Fax</th>
				<th>Email</th>
				<th>Site</th>
				<th>Bureau</th>
			</tr>
		</thead>
<?php	
	// Script pour afficher un tableau des données de l'annuaire
		//Paramètres de connexion
		require_once('../../functions.php');
 
		// Requête MySQL
		$sql = "SELECT * FROM $mytab5 ORDER BY name";
		$request = mysql_query($sql,$link) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
 
		// Boucle sur les lignes de la db
		while($data = mysql_fetch_assoc($request))
		{ ?>
 
		<!-- Appel de la fonction de colorisation alternée des lignes du tableau -->
		<tr bgcolor="<?php echo switchcolor(); ?>">
			<td id="name-<?php echo $data['INDEX']; ?>" class="cellule" onclick="inlineMod(<?php echo $data['INDEX']; ?>, this, 'name', 'Texte')">
				<?php echo$data['name'] ;?>
			</td>
			<td id="<?php echo $data['INDEX']; ?>" class="cellule" onclick="inlineMod(<?php echo $data['INDEX']; ?>, this, 'forname', 'Texte')">
				<?php echo $data['forname']; ?>
			</td>
			<td id="<?php echo $data['INDEX']; ?>" class="cellule" onclick="inlineMod(<?php echo $data['INDEX']; ?>, this, 'function', 'Texte')">
				<?php echo $data['function']; ?>
			</td>
			<td id="<?php echo $data['INDEX']; ?>" class="cellule" onclick="inlineMod(<?php echo $data['INDEX']; ?>, this, 'department', 'Texte')">
				<?php echo $data['department']; ?>
			</td>
			<td id="<?php echo $data['INDEX']; ?>" class="numeros" onclick="inlineMod(<?php echo $data['INDEX']; ?>, this, 'tel', 'Texte')">
				<?php echo $data['tel']; ?>
			</td>
			<td id="<?php echo $data['INDEX']; ?>" class="numeros" onclick="inlineMod(<?php echo $data['INDEX']; ?>, this, 'tel2', 'Texte')">
				<?php echo $data['tel2']; ?>
			</td>
			<td id="<?php echo $data['INDEX']; ?>" class="numeros" onclick="inlineMod(<?php echo $data['INDEX']; ?>, this, 'fax', 'Texte')">
				<?php echo $data['fax']; ?>
			</td>			
			<td id="<?php echo $data['INDEX']; ?>" class="cellule" onclick="inlineMod(<?php echo $data['INDEX']; ?>, this, 'email', 'Texte')">
				<?php echo $data['email']; ?>
			</td>
			<td id="<?php echo $data['INDEX']; ?>" class="cellule" onclick="inlineMod(<?php echo $data['INDEX']; ?>, this, 'place', 'Texte')">
				<?php echo $data['place']; ?>
			</td>			
			<td id="<?php echo $data['INDEX']; ?>" class="cellule" onclick="inlineMod(<?php echo $data['INDEX']; ?>, this, 'office', 'Texte')">
				<?php echo $data['office']; ?>
			</td>			
		</tr>
<?php
		}
 
?>
		<!-- Affichage d'un pied de tableau -->
		<tfoot>
			<tr>
				<th>Nom</th>
				<th>Prénom</th>
				<th>Fonction</th>
				<th>Département</th>
				<th>Tel. #1</th>
				<th>Tel. #2</th>
				<th>Fax</th>
				<th>Email</th>
				<th>Site</th>
				<th>Bureau</th>
			</tr>
		</tfoot>
	</table>
	</div>
<br />
</body>
</html>	
<?php
		// On est poli et on ferme la porte
		mysql_close();
		}
?>

Je suis sous IE6, et j'ai le même problème avec FF et IE7.
J'ai beau me gratter

, je vois pas...

Si quelqu'un a une piste ou un premier élément de réponse, merci beaucoup !

Mister Shell · 30/07/2007, 11h31

en relisant bouquins et autres posts, je me suis dit que je n'avais pas installé la bibliothèque Prototype.

Ca ne change rien malgré tout...

Mister Shell · 30/07/2007, 12h02

j'ai activé firebug, et même si je ne connais pas son fonctionnement, je vois que lorsque je modifie un input, deux requêtes sont passées lorsque je presse entrée 1 fois.
Par contre, avec le pointeur de souris, une seule requète passe.

Bizarre, non ?

Edit de cet aprèm :
Je viens d'ajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

&& xhr.status == 200

dans le fichier inlinemod.js.
Ca ne change rien à mon problème, mais par contre une erreur se produit "

"xhr est indéféni".

Je nage complètement...

Mister Shell · 31/07/2007, 14h48

Bon, alors je progresse à tatons, mais je progresse un peu.

le dernier problème "xhr" est indéfini venait de la casse dans le script. Ca c'est réglé. Y'a plus d'erreur selon firebug.

Mais l'input de saisie de texte ne disparait toujours pas , alors que quand je teste l'exemple du tuto sur mon serveur, il fonctionne.

toniodp · 31/07/2007, 15h54

En modifiant cet excellent script comme tu l'as souligné, les mêmes problèmes me sont arrivés (double requete sur entrée, pas au clic, pas de disparition du input).
Je ne sais malheureusement plus ce qui clochait, mais as tu essayé de deplacer l'endroit dans le code ou tu fais la suppression du input?

Mister Shell · 31/07/2007, 16h14

Citation:

Envoyé par toniodp

En modifiant cet excellent script comme tu l'as souligné, les mêmes problèmes me sont arrivés (double requete sur entrée, pas au clic, pas de disparition du input).
Je ne sais malheureusement plus ce qui clochait, mais as tu essayé de deplacer l'endroit dans le code ou tu fais la suppression du input?

Merci toniodp pour ton "input". je n'ai rien modifié dans la structure du code, de peur de mettre en l'air tout ça (je suis complètement novice en js+ajax...).
Je vais essayer cela et je reviendrai ici.

toniodp · 31/07/2007, 17h04

Alors d'un vague souvenir et donc si je me trompe pas, je crois que j'avais modifié l'ordre dans les fonctions appelées en sortie d'édition et il fallait garder cet ordre:

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
 
//Sortie de l'input
	input.onblur = function sortir()
	{
	  sauverMod(params);
	  delete input;
    editionEnCours = false;
    sauve = false;
	};
 
	//Appui sur la touche Entrée
	input.onkeydown = function keyDown(event)
	{      
	  if (!event&&window.event)
        {
          event = window.event;
        }
		if(getKeyCode(event) == 13)
    {
			sauverMod(params);
		  delete input;
      editionEnCours = false;
      sauve = false; 
    }
	};

En esperant t'avoir aidé...

Mister Shell · 31/07/2007, 17h23

merci beaucoup pour ta contrib'.

j'étais en train de mettre des conditions pour voir où ça bloquait et je n'étais pas si loin du résultat que tu as posté.
je ne peux pas tester pour le moment, mais si ça fonctionne, je viendrai mettre le résultat et clore le tread.

30/07/2007, 11h31	#2
Mister Shell Futur Membre du Club Inscription : décembre 2006 Messages : 39 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 39 Points : 15 Points : 15	en relisant bouquins et autres posts, je me suis dit que je n'avais pas installé la bibliothèque Prototype. Ca ne change rien malgré tout...
	00

30/07/2007, 12h02	#3
Mister Shell Futur Membre du Club Inscription : décembre 2006 Messages : 39 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 39 Points : 15 Points : 15	j'ai activé firebug, et même si je ne connais pas son fonctionnement, je vois que lorsque je modifie un input, deux requêtes sont passées lorsque je presse entrée 1 fois. Par contre, avec le pointeur de souris, une seule requète passe. Bizarre, non ? Edit de cet aprèm : Je viens d'ajouter Code : Sélectionner tout - Visualiser dans une fenêtre à part && xhr.status == 200 dans le fichier inlinemod.js. Ca ne change rien à mon problème, mais par contre une erreur se produit " "xhr est indéféni". Je nage complètement...
	00

31/07/2007, 14h48	#4
Mister Shell Futur Membre du Club Inscription : décembre 2006 Messages : 39 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 39 Points : 15 Points : 15	Bon, alors je progresse à tatons, mais je progresse un peu. le dernier problème "xhr" est indéfini venait de la casse dans le script. Ca c'est réglé. Y'a plus d'erreur selon firebug. Mais l'input de saisie de texte ne disparait toujours pas , alors que quand je teste l'exemple du tuto sur mon serveur, il fonctionne.
	00

31/07/2007, 15h54	#5
toniodp Candidat au titre de Membre du Club Inscription : mars 2007 Messages : 20 Détails du profil Informations forums : Inscription : mars 2007 Messages : 20 Points : 14 Points : 14	En modifiant cet excellent script comme tu l'as souligné, les mêmes problèmes me sont arrivés (double requete sur entrée, pas au clic, pas de disparition du input). Je ne sais malheureusement plus ce qui clochait, mais as tu essayé de deplacer l'endroit dans le code ou tu fais la suppression du input?
	00

31/07/2007, 17h23	#8
Mister Shell Futur Membre du Club Inscription : décembre 2006 Messages : 39 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 39 Points : 15 Points : 15	merci beaucoup pour ta contrib'. j'étais en train de mettre des conditions pour voir où ça bloquait et je n'étais pas si loin du résultat que tu as posté. je ne peux pas tester pour le moment, mais si ça fonctionne, je viendrai mettre le résultat et clore le tread.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email