Inline modification : ajout d'une liste

[Bugsounet]

Bonjour,

Je fais suite en fait au tutorial de Oliver Lance sur la modification Inline en ajax.
Je l'utilise, il marche parfaitement mais j'aurais besoin en fait de l'étendre dans ses fonctionnalités.

Mon but serait lorsque je double clic, qu'il affiche une liste déroulante avec des informations récupérées d'une base de données et lorsque je sors du focus, il me mette ce que j'ai sélectionné (enfin même principe que pour un simple input ou textearea).

J'ai essayé depuis son script de créer un select, puis d'y ajouter des options. Je me heurte déjà tout au début au fait que je n'arrive pas à adjoindre au select une ID, ce que me permettrait d'adjoindre à ce select les balises options. J'ai essayé la méthode setattribute() mais cela ne marche pas. J'ai un peu recherché et il semble que IE6 à du mal avec cela.

J'arrive à créer la liste (le select) mais bien sur sans balise option c'est vide et curieusement il ne me permet pas de sortir du focus et je reste bloqué sur la liste (deuxième problème potentiel).

Je précise que je n'ai besoin que d'une compatibilité sur IE6 windows.

Est ce que vous avez des idées ???

Merci beaucoup

[Bugsounet]

Bonjour à nouveau,

Donc je progesse un peu...

Code :

1
2
3
4
5
6
7
8
9
10
11
 
// valeur de type liste déroulante
		case "liste":
		input = document.createElement("select");
 
		for (i=0;i<5;i++)
		{
		var k = document.createElement("option");
		k.value = i;
		input.appendChild(k);
		}

Ci dessus le code dans la continuité du tutorial. Je créé donc le select et pour le moment je tente d'ajouter via une boucle 4 élement option.

Le résultat est que lorsqu eje double clic j'ai bien une liste de 4 options mais la liste est vide. Est ce que vous savez pourquoi, la liste est vide ?

[Bugsounet]

Donc je continue,

ALors je me suis rendu compte que bêtement le

Code :

1
2
 
k.value = i;

ne donnait que la valeur mais pas ce qui apparait entre les balises "option"

J'ai donc rajouté un

Code :

1
2
 
k.texte = i;

Je ne comprends pas pourquoi ma liste est vide..

[OSdave]

Salut,
désolé de repêcher ce sujet d'il y a 3 mois, mais je voudrais faire +/- la même chose et je voulais savoir si vous étiez arrivé à un résultat, histoire d'éviter de réinventer la roue.

Je dis plus ou moins parce que, premièrement, pour moi la compatibilité est plutôt orientée à Firefox, bien que si ça marche aussi sur IE c'est pas plus mal.
Et, deuxiêmement, d'après le code je pense que vous avez appliqué la première partie du tutorial, tandis que je me suis basé sur la seconde, avec l'utilisation de classes.

Merci, @+

[sn4ke]

Débutant en Javascript, j'ai réussi (plus ou moins) à créer une classe pour faire un select.

Celle-ci est evidemment basé très fortement sur les classes fourni par le tutorial. Il doit y avoir des manières bien plus simple de faire autrement.
En effet, j'utilise 2 tableaux, passés en paramètres, un pour les value et un pour les libellés des différents options du select.
(ne pas oublier d'utiliser une fonction convertissant les tableaux php en tableau Javascript (tab1 et tab2 dans l'utilisation ci-dessous))

Utilisation :

Code :

1
2
<td id=\"descr-".$num."\" class=\"cellule\" ondblclick=\"inlineMod(".$num.", this, 'idp', 'Selection',tab1,tab2)\">".$nom."</td></tr>";

Néanmoins, j'ai un léger souci, après la selection, (la modification est effectuée sans problème), la valeur de l'option s'affiche, alors que j'aimerai avoir le texte. Après refresh de la page, l'affichage est correct.
(Je ne peux pas utiliser les mêmes valeurs pour value et text du select).

Merci

[dream_of_australia]

J'ai une solution au problème évoqué par sn4ke, je vous donne ici le code de la fonction terminerEdition de la classe ListeDeroulante :

Code :

1
2
3
4
ListeDeroulante.prototype.terminerEdition = function() {
this.parent.replaceChild(document.createTextNode(liste.options[liste.selectedIndex].text), this.parent.firstChild) ;
	delete liste ;
}

Vous avez simplement besoin de remplacer ListeDeroulante par votre nom de classe à vous, et liste par votre appellation également (input pour Bugsounet par exemple).

Avec ce code, après le choix d'une option dans la liste, c'est bien le texte de l'option qui apparaît et non sa valeur

[dream_of_australia]

Par contre je voudrais savoir si ce que vous avez fait fonctionne sous IE, parce que moi la liste déroulante qui apparaît est vide sous IE, alors que sous Firefox ça fonctionne très bien. C'est d'ailleurs peut-être le souci de Bugsounet.

[dream_of_australia]

Très étonnant ! La liste sous IE est composée d'éléments vides, mais lorsque je clique sur un des éléments de la liste la modification est bien effectuée avec la bonne valeur et après rafraîchissement de la page le texte de la cellule s'actualise avec la bonne donnée.

Donc apparemment c'est juste le text des options qui ne s'affiche pas, leurs values sont bonnes. Et la réactualisation du texte de la cellule ne fonctionne pas sur le coup, il faut rafraîchir la page.

Je mets ici la fonction qui créé la liste déroulante, le souci doit venir de là :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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")) ;
	for (i = 0 ; i < tab.length ; i++) {
		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) ;
}

Quelqu'un a-t-il une idée ?

[dream_of_australia]

Problème résolu sous IE, mais maintenant c'est sous Firefox que ça plante.

Dans la boucle for de la fonction remplacerTexte :

Ce qui marche pour IE :

Code :

1
2
var k = new Option(tab[i][1],tab[i][0]);
liste.add(k);

Ce qui marche pour Firefox :

Code :

1
2
3
4
var k = document.createElement("option");
k.value = tab[i][0] ;
k.text = tab[i][1] ;
liste.appendChild(k);

Sachant que je n'ai qu'un seul tab qui contient pour chaque ligne à l'index 0 la valeur de l'option, et à l'index 1 son texte.

Comment faire pour mettre le code ci-dessus en fonction du navigateur ?

[dream_of_australia]

Voilà quelque chose qui marche chez moi pour les deux navigateurs IE et FF, mais à mon avis pas pour toutes les versions, ça manque de robustesse.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
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) ;
	}
}

Est-ce que quelqu'un a un test plus fiable du navigateur ? Merci !

[sn4ke]

Merci de ta réponse dream_of_australia, ca marche bien.
Pour ton test, il me semble qu'il n'y a qu'avec cette fonction que tu peux récupérer le nom du navigateur.
Ton test est valide pour toutes les versions de IE à partir de la 4, donc normalement aucun problème...
Merci

[OSdave]

Envoyé par dream_of_australia

Est-ce que quelqu'un a un test plus fiable du navigateur ? Merci !

Salut, pour éviter de devoir tester le navigateur tu peux employer k.innerHTML, qui fonctionne sous IE et FF.
bon code

[sn4ke]

Bonjour,

j'ai actuellement un autre problème, et je reposte ici car ca concerne la classe d'ajout de liste pour la modification inline.

En effet, après avoir implémenté la liste pour la modification, j'ai voulu ajouter dans ma page une gestion de hide/show avec scriptaculous.

A partir de là tout marche séparement mais malheureusement pas ensemble.

Dès que j'ajoute les bibliothèques scriptaculous, et prototype, la liste qui s'affiche pour la modification inline contient des fonctions de la bibiothèque prototype...

Voila j'espère avoir été assez clair (dans le cas contraire, signaler le moi, j'essaierai d'être plus clair) , si quelqu'un a eu le même problème et a réussi a le résoudre, ca m'interresse fortement.

Merci.