[AJAX] [SRC] Ajout de classe au tutoriel d'Olivier Lance "modification inline de données"

[dream_of_australia]

Bonjour à tous,

J'ai créé une classe pour les listes déroulantes à ajouter aux classes déjà présentes dans le tutoriel d'Olivier Lance. La classe est bien entendu largement inspirée des classes existentes, et j'ai glané sur le forum quelques infos pour avancer.

Voici un code qui fonctionne sous Firefox 1.8 et IE 6 mais ne marche pas à mon avis pas sur tous les navigateurs. Toute suggestion à ce sujet est la bienvenue.

fichier inlinemod.class.listeDeroulante.js

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

Modification du fichier inlinemod.js : ajouter simplement au code la fonction suivante :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function inlineModTab(id, obj, tab, nomChamp, classe) {
    if(editionEnCours) return false;
    else {
        editionEnCours = true;
        sauve = false;
    }
    champ = eval('new ' + classe + '();') ;
    champ.valeur = obj.innerText ? obj.innerText : obj.textContent ;
    champ.valeur = trim(champ.valeur) ;
    champ.id = id ;
    champ.nomChamp = nomChamp ;
    champ.remplacerTexte(obj, sauverModTab, tab) ;
    champ.activerChamp() ;
}

Cette fonction fonctionne comme inlineMod d'Olivier Lance, sauf qu'elle prend en compte le tableau contenant les options du select.

Enfin, voici un exemple d'appel de la fonction ci-dessus

Code :

<td class="cellule" ondblclick="inlineModTab(<?php echo $produit["idproduit"] ; ?>, this, listecategoriesJS, 'idcategorie', 'ListeDeroulante')">

Remplacements à faire pour l'appel :

• <?php echo $produit["idproduit"] ; ?> => par l'id dont vous avez besoin

• listecategorieJS => par le tableau javascript contenant les options de la liste sous la forme tab[i][0] = value ; tab[i][1] = text ;

• 'idcategorie' => par le nom du champ de votre table sql

Pour avoir un tableau javascript, je construis un tableau php comme suit :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
function listeMarques() {
    $sql_id = connectAdmin() ; // connexion à la base de données et sélection de la base
    $query = "SELECT * FROM marques" ;
    $result = mysql_query($query) ;
    if ($result) {
        $n = mysql_num_rows($result) ;
        for ($i = 0 ; $i < $n ; $i++) {
            $tmp = mysql_fetch_row($result) ;
            for ($j = 0 ; $j < 2 ; $j++)
                $tab[$i][$j] = $tmp[$j] ;
        }
    }
    mysql_close($sql_id) ;
    return $tab ;
}
?>

Puis j'utilise le code donné dans la FAQ par torvalds17 et simone.51 pour convertir le tableau php en tableau javascript :

Code :

1
2
3
4
5
6
<?php
$listemarques = listeMarques() ;
echo "<script type='text/javascript'>" ;
construisTableauJS($listemarques, "listemarquesJS") ;
echo "</script>" ;
?>

J'espère que ça pourra servir à quelques personnes ! Toute remarque, suggestion, critique etc... est la bienvenue.

[OSdave]

bonjour à toi dream_of_australia,
J'étais justement moi aussi en train de travailler sur cette classe.
Pour tout dire, comme je suis arrivé à un résultat cet aprême, je n'ai pas essayé ton code. Je ne crois pas que le mien soit meilleur que le tien, d'ailleurs si ça fonctionne c'est ce qui compte, mais c'est toujours intéressant d'avoir un autre point de vue.

Le voici donc, juste pour avoir une autre possibilité.

La clase inlinemod.class.dropDown.js:

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
var desplegable = null;
 
//Constructeur de l'objet
function DropDown() {
    this.id = -1;
    this.valeur = "";
    this.nomChamp = "";
    this.parent = null;
    this.texteErreur = "";
    this.extra = "";
}
 
//Fonction de remplacement du texte de parent par le champ
DropDown.prototype.remplacerTexte = function (parent, sauvegarde) {
    if(!parent || !sauvegarde) {
        return false;
    } else {
        this.parent = parent;
    }
 
    desplegable = document.createElement("select");
 
    if(window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} else if(window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
	var url = "survey_ajax.php?action=getOptions&dropdown=" + this.extra;
	xmlHttp.open("GET", url, true);
	xmlHttp.onreadystatechange = function()	{
		if (xmlHttp.readyState == 4) {
			var i = 0;
			var option = "";
			while ( i < xmlHttp.responseText.length ) {
				option = "";
				option = document.createElement("option");
				option.value = xmlHttp.responseText.substring(i, xmlHttp.responseText.indexOf(':', i));
				option.innerHTML = xmlHttp.responseText.substring(xmlHttp.responseText.indexOf(':', i)+1, xmlHttp.responseText.indexOf(';', i));
				desplegable.appendChild(option);
				i = i + option.value.length + option.innerHTML.length + 2;
			}
		}
	}
	xmlHttp.send(null);
 
    //Assignation des événements qui déclencheront la sauvegarde de la valeur
    //Sortie du desplegable
    desplegable.onblur = function ()
    {
        sauvegarde.call();
    };
 
    parent.replaceChild(desplegable, parent.firstChild);
}
 
//Fonction permettant de récupérer la valeur du champ
DropDown.prototype.getValeur = function () {
    return desplegable.options[desplegable.selectedIndex].value
}
 
//Fonction d'activation du champ
DropDown.prototype.activerChamp = function ()
{
    desplegable.focus();
    desplegable.select();
}
 
//Fonction de sortie du mode d'édition
DropDown.prototype.terminerEdition = function () {
    this.parent.replaceChild(document.createTextNode(desplegable.options[desplegable.selectedIndex].text), this.parent.firstChild);
    delete desplegable;
}
 
//Fonction déterminant si la valeur passée au script PHP doit être formatée par celui-ci ou pas
DropDown.prototype.echaperValeur = function () {
    return "false";
}
DropDown.prototype.erreur = function () {
    return false;
}

Comme toi, largement inspirée par les classes d'Olivier dans son tutoriel.
Les différences que j'ai vu:

• les options sont créées en décortiquant une variable stockée dans la bd (c'est pas du code joli-joli, mais ça marche )
• pour contourner le problême de IE qui ne comprend pas .texte pour donner la valeur du texte de l'option, j'ai employé .innerHTML
• la fonction erreur renvoie toujours false: vu que c'est un dropdown, il n'y a pas moyen de ne pas répondre
• la fonction sauvegarde est appelée lors du onblur: surtout parce que je n'ai pas réussi à inclure l'attribut selected.

Fonction inlineMod:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function inlineMod(id, obj, nomChamp, classe, extra) {
	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.id = id;
    champ.nomChamp = nomChamp;
    champ.extra = extra;
 
    //Remplacement du texte par notre objet input
    champ.remplacerTexte(obj, sauverMod);
 
    //"Activation" du champ (focus, sélection ou autres...)
    champ.activerChamp();
}

j'ai rajouté une variable extra: pour les modifications de texte j'y mets l'id de la langue (je travaille sur des sites multi-langues).
Et pour cette classe dropDown, j'y mets le nom de la variable de la bd à récupérer.

Voilà en gros. Si qqun veut plus de détails, ya qu'à demander
Et j'insiste, je ne prétends pas du tout que ma version soit meilleure, c'est juste pour partager les résultats que j'ai obtenu grâce au tutoriel d'Olivier (cela me semble la moindre des choses, merci encore Bestiol ) en espérant que ça inspirera un jour qqun d'autre.

bonne soirée et bon code

[azizdemrk]

bonjour, est ce que c'est possible que l'orsque on clique sur la celule pour modifier son contenu que sa couleur reste la meme et qu'il aura pas de border, cad on voit pas qu'il s'agit d'input.
Merci

[camusdesbois]

Bonjour à tous,

Ceux qui ont tenté d'ajouter la classe pour la liste deroulante de dream_of_australia se sont certainement heurté au même probleme que moi à savoir le sauverModTab non défini dans la fonction à ajouter dans inlinemod.js

Si on le remplace candidement par sauverMod on obtient bien quelquechose qui fonctionne mais la mise à jour se fait avec le champ id de la base comprenant les données de la liste deroulante au lieu de la valeur.

Il n'est certainement pas tres compliqué à partir de la d'ecrire une fonction qui va bien mais je suis plutôt une quiche en JS et fixer ce petit probleme aiderait pas mal de monde je pense et moi le premier

bref si quelqu'un a ecrit cette fonction ou si l'auteur l'a sous la main, ce serait grandement apprécié

[camusdesbois]

bon ben j'ai fini par le faire moi même au final

[alanoo]

Bonjour,

en fait, je voudrais juste rentrer en static mes valeurs de variable select
dans la page du formulaire (par exemple Sexe: Masculin, Feminin, Inconnu )

Exemple 1
J ai essayé les deux exmples, mais bien qu ayant crée un tableau
<script type='text/javascript'>
var listecategoriesJS = new Array("Masculin", "Feminin", "Inconnu");
</script>
je n'arrive pas a lancer la bonne ligne d'appel
echo" <td class='cellule' ondblclick='inlineMod(".$user['sexe'].", this, \"listecategoriesJS\", \"idcategorie\",\"ListeDeroulante\")'>".$user['sexe']."</td>";
Cela ne marche pô....

Deuxieme exemple
J'ai pas tout compris, ni comment la creation des variables se faisait pour alimenter le select...
Au double click, j'ai bien le select qui apparait, mais est tout vide, et la valeur ancienne n'apparait pas...

Merci de votre aide.

Alain

[VooDooNet]

Bonjour,
j'ai bien suivi le tuto d'Olivier Lance, et suivi les indications de ce sujet, mais je n'arrive pas a utiliser le inline edit sur un select...

Est-ce que quelqu'un aurait un exemple complet, permettant de modifier 'inline' a la fois un input et un select??

Merci d'avance.
A+
VooDoo

[lanner]

Salut, si je comprend bien ce tuto , cela permet d'avoir un menu déroulant en fesant appel via une base de donnée en fesant une boucle, mais comment faire si l'on veux ajouter soit même les différents choix d'un menu déroulant, sans justement faire l'appel via la bdd ?
Merci