[AJAX] Modification Inline Select

**brazilia28** · 25/09/2007, 15h46

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

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&eacute;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();
 
?>

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
 
 
 
//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

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

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
 
 
<?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

**E.Bzz** · 25/09/2007, 15h56

Bonjour,
a priori, il te suffit de faire appel à ListeDeroulante.prototype.getTexte au lieu de ListeDeroulante.prototype.getValeur ...

A+

**brazilia28** · 25/09/2007, 16h05

merci de ta réponse,

Je viens de remplacer :

Code :

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

1
2
 
XHR.open("GET", "sauverMod.php?champ=" + escape(champ.nomChamp) + "&valeur=" + escape(champ.getValue()) + "&echap=" + champ.echaperValeur() + "&id=" + champ.id + ieTrick(), true);

par :

Code :

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

1
2
 
XHR.open("GET", "sauverMod.php?champ=" + escape(champ.nomChamp) + "&valeur=" + escape(champ.getTexte()) + "&echap=" + champ.echaperValeur() + "&id=" + champ.id + ieTrick(), true);

Mais cette fois, j'ai cette erreur :

Champ 'undefined' inconnu dans field list

?????

**brazilia28** · 25/09/2007, 18h53

c'est bon j'ai résolu mon problème.

Effectivement, il fallait passer getTexte() en paramètre et non getValeur(), mais il y avait une erreur également dans la requête UPDATE de sauverMod.

Un problème de guillemets, tout simplement

Merci beaucoup E.Bzz

A bientôt

[AJAX] Modification Inline Select

JavaScript

Discussions similaires

Partager

Partager