PB modification inline

**nico26** · 07/02/2007, 12h04

Bonjour
Je sais que c'est pas le premier post sur ce sujet. Mais je n'ai pas trouvé la réponse à mon problème.
J'ai une page qui charge les données d'une base suivant un n° sélectionné dans une liste deroulante. Ces données sont affiché dans un tableau.

J'ai suivi le tuto donné et voici mes problèmes.

Quand je double clique sur le champ à modifier, le input apparait mais il ne remplace pas temporairement la valeur à modifier, elle reste à coté du input.

Quand je valide le champ, par un clic à coté, il est rajouté à coté de l'ancienne valeur. Quand le champ est vide et que je clic pour ajouter une valeur, dans le input il y a "undefined", quand je valide par entrée "Erreur SQL"

Le tout n'est pas modifié dans ma base.
Je n'arrive pas à savoir si la page sauverMod est appelé.

Merci de vos éclairement!!

details.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
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
 
<?
// Chargement des paramètres
//de connexion à la base de données
include ('connexion.php');
 
    //Récupération du N° de clé de la page précédante
    $val = $_POST['leLieu'];
 
    /* Création de la requête pour avoir les bâtiments de ce secteur */
    $sql = "SELECT tbl_cles.ID_cles,tbl_cles.Lieu,tbl_cles.Dispo,tbl_cles.Num_Secteur,tbl_cles.CodeMarcheEnt,tbl_cles.CodeArretEnt,tbl_cles.CodeMarchAgent,tbl_cles.CodeArretAgent,tbl_secteurs.Nom_Secteur".
            " FROM tbl_cles,tbl_secteurs".
            " WHERE tbl_cles.ID_cles = '".$val."' AND tbl_cles.Num_Secteur = tbl_secteurs.ID_secteur ".
            " ORDER BY tbl_cles.ID_cles;";
 
 
    //Exécution de la requête
    $rech_lieu = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
 
?>
<html>
  <head>
    <title>
        Détail de la Clé
    </title>
    <script type="text/javascript" src="./inlinemode.js" charset="iso_8859-1"></script> 
<style type="text/css">
    td.cellule
    {
	     text-align: center;
	     border: 1px solid #99ccff;
	     cursor: pointer;
    } 
</style>
  </head>
  <body bgcolor=#99ccff>
      <font size=3 face="Arial">Détails de la Clé</font>
      <br>
      <br>
      <form name='modifcle' action='details.php' method='get''>
        <table border=1>
        <? while($user = mysql_fetch_assoc($rech_lieu))
           {
        ?>
          <tr>
            <td>
              <u>Clé n°: </u>
            </td>
            <td class="cellule" ondblclick="inlineMod(<? echo $val; ?>, this, 'ID_cles', 'texte')">
              <!--<input type="text" name="numcle" size=5 value="">-->
              <? echo $val; ?>
            </td>
          </tr>
          <tr>
            <td>
              <u>Lieu : </u>
            </td>
            <td class="cellule" ondblclick="inlineMod(<? echo $val; ?>, this, 'Lieu', 'texte')">
              <!--<input type="textarea" name="nom_lieu" size=50 value="">-->
              <? echo $user['Lieu']; ?>
            </td>
          </tr>
          <tr>
            <td>
              <u>Secteur : </u>  
            </td>
            <td class="cellule" ondblclick="inlineMod(<? echo $val; ?>, this, 'Nom_Secteur', 'texte')">
              <!--<input type="text" name="nom_secteur" size=50 value="">-->
              <? echo $user['Nom_Secteur']; ?>
            </td>
          </tr>
          <tr>
            <td>
              &nbsp;
            </td>
          <tr>
            <td>
              <b><u>Codes Alarmes</u></b>
            </td>
          </tr>
          <tr>
            <td>
              <u>Marche Entreprise : </u>
            </td>
            <td class="cellule" ondblclick="inlineMod(<? echo $val; ?>, this, 'CodeMarcheEnt', 'texte')">
              <!--<input type="text" name="cde_on_ent" value="">-->
              <? echo $user['CodeMarcheEnt']; ?>
            </td>
          </tr>
          <tr>
            <td>
              <u>Arrêt Entreprise : </u>
            </td>
            <td class="cellule" ondblclick="inlineMod(<? echo $val; ?>, this, 'CodeArretEnt', 'texte')">
              <!--<input type="text" name="cde_off_ent" value="">-->
              <? echo $user['CodeArretEnt']; ?>
            </td>
          </tr>
          <tr>
            <td>
              <u>Marche Agent : </u>
            </td>
            <td class="cellule" ondblclick="inlineMod(<? echo $val; ?>, this, 'CodeMarchAgent', 'texte')">
              <!--<input type="text" name="cde_on_agt" value="">-->
              <? echo $user['CodeMarchAgent']; ?>
            </td>
          </tr>
          <tr>
            <td>
              <u>Arrêt Agent : </u>
            </td>
            <td class="cellule" ondblclick="inlineMod(<? echo $val; ?>, this, 'CodeArretAgent', 'texte')">
              <!--<input type="text" name="cde_off_agt" value="">-->
              <? echo $user['CodeArretAgent']; ?>
            </td>
          </tr>
          <tr>
            <td>
              &nbsp;
            </td>
          <tr>
            <td>
              &nbsp;
            </td>
          </tr>
          <tr>
            <td>
              <b><u>Sortie :</u></b>&nbsp;&nbsp;<? echo $user['Dispo']; ?>
            </td>
           </tr>
           <?
           }
           ?>
        </table> 
      </form>
      <center>
      <table border=4 width=90% cellpadding=0 cellspacing=0>
      <!--Affichage des titres du tableau-->
        <th bgcolor=#ffcc66>Entreprises</th>
        <th bgcolor=#ffcc66>Agents</th>
        <th bgcolor=#ffcc66>Téléphone</th>
        <th bgcolor=#ffcc66>Date de Sortie</th>
        <th bgcolor=#ffcc66>Date de Retour</th>
        <?
          //Requête pour  chercher les emprunts des clés
          $requete = "SELECT tbl_emprunts.ID_Emprunt,tbl_emprunts.num_Entreprise,tbl_emprunts.Num_Cle,tbl_emprunts.Nom_Agent,".
                       "tbl_emprunts.Telephone,tbl_emprunts.Date_Sortie,tbl_emprunts.Date_Retour,tbl_entreprises.Nom_Entreprise,".
                       "tbl_entreprises.ID_Entreprise".
                       " FROM tbl_emprunts,tbl_entreprises".
                       " WHERE tbl_emprunts.Num_cle=".$val." AND tbl_entreprises.ID_Entreprise=tbl_emprunts.num_Entreprise";
          //Exécution de la requète
          $exec = mysql_query($requete, $db_connexion) or die('Erreur SQL !<br>'.$requete.'<br>'.mysql_error());
 
           //Iniatialisation des variables   
          $nd = 0;
          $ligne = array();
 
          //Remplis le tableau avec les valeurs recherchées dans la base de données  
          while ($recuperation = mysql_fetch_assoc($exec))
          {        
              $ligne[] = "<tr onMouseOver='this.style.background=\"lightgreen\"' onMouseOut='this.style.background=\"\"'><td align=center>".$recuperation['Nom_Entreprise']."</td><td align=center>".$recuperation['Nom_Agent']."</td><td align=center>".$recuperation['Telephone']."</td><td align=center>".$recuperation['Date_Sortie']."</td><td align=center>".$recuperation['Date_Retour']."</td></tr>";
              $nd++;
          }
          //Affiche le tableau pour chaque ligne trouvée
          for ($d = 0; $d < $nd; $d++)
          {
              echo $ligne[$d];
          }
          mysql_close();
        ?>   
      </table>
      <br><br>
      <a href="javascript:window.close()">
      <img src="images/error.gif" alt="fermer" border="0" width=5%>
      </a>
      <!--<input type=image src= onclick="" width=5%>-->
      </center>
  </body>
</html>

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
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);
}

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
 
<?
 
    //Chargement des paramètres
    //de connexion à la base de données
    include ('connexion.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('Lieu', 'Num_Secteur', 'CodeMarcheEnt', 'CodeArretEnt', 'CodeMarchAgent', 'CodeArretAgent', 'Dispo')
        ))
{
    exit;
}
 
//Connexion à la base de données
//mysql_connect('', '', '') or die(mysql_error());
//mysql_select_db('') 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 tbl_cles"; 
        $sql .= " SET " . mysql_real_escape_string($_GET['champ']) . "='";
        $sql .= mysql_real_escape_string($_GET['valeur']) . '" WHERE ID_cles=' . intval($_GET['id']);
        break;
 
    case 'nombre':
        $sql  = "UPDATE tbl_cles";
        $sql .= " SET " . mysql_real_escape_string($_GET['champ']) . "=" . intval($_GET['valeur']);
        $sql .= " WHERE ID_cles=" . intval($_GET['id']);
        break;
 
    default:
        exit;
}
 
// Exécution de la requête
mysql_query($sql) or die(mysql_error());
 
mysql_close();
 
?>

**nico26** · 08/02/2007, 11h41

Personne ne peut m'aider.
Je ne vois pas ou sont les problèmes

Merci de m'aider

**Matthieu2000** · 09/02/2007, 13h58

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
//URL du script de sauvegarde auquel on passe la valeur à modifier
	XHR.open("GET", "sauverMod.php", true);
 data="id=" + id + "&champ=" + nomValeur + "&valeur=" + escape(valeur) + "&type=" + type + ieTrick();
	//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(data);

**nico26** · 13/02/2007, 09h56

Merci de la réponse mais cette modification ne fonctionne pas!

PB modification inline

JavaScript

Discussions similaires

Partager

Partager