Discussion :

[thibane]

Bonjour à tous.

Je vous présente un bug que j'ai réellement du mal à fixer.
Je vais essayer d'être le plus clair possible.

La fonctionnalité utilise Prototype et Scriptaculous mais le problème ne vient pas de là, je pense..

Scénario : je drag une liste 'ul' contenant plusieurs 'li' et je la drop dans un conteneur. Avec un revert:true , je fais revenir la liste de là ou je l'ai prise et je veux ensuite reconstruire cette liste là où je l'ai droppée, mais avec des valeurs d'attributs adaptés à l'emplacement.

Voici le code des listes que je déplace :

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
 
<ul id="LP_1">
	<li id="LP_1_1" class="actif2">
		<a onclick="afficherCacher('contenuZdc1Lp1');changerBouton('LP_1_1_bouton');"> 
				<img id="LP_1_1_bouton" 
					 src="arbo_picto_noeudplus.gif" />
		</a>
		<span class="handle">Abc 1</span>
		<div id="contenuZdc1Lp1" style="display:none;">
			<ul id="LP_1_1_contenu">
				<li id="LP_1_1_1" class="actif2">
					<span class="handle">Def1</span>
				</li>	
				<li id="LP_1_1_2" class="actif2">
					<span class="handle">Def2</span>
				</li>
			</ul>
		</div>
	</li>
</ul>

Pour information, les fonctions afficherCacher et changerBouton ne servent juste respectivement qu'à faire un display:none/block sur le div et à changer le bouton noeud+ en noeud- (histoire donc de plier de déplier l'arborescence)

Le problème est le suivant : je déplace plusieurs zones à des endroits différents. La première fois que je fais le déplacement, aucun problème dans la reconstruction de la liste, tout fonctionne. Les fonctions javascript fonctionnent.
Les fois suivantes, les fonctions javascript afficherCacher et changerBouton de toutes les listes ajoutées dynamiquement (reconstruites dynamiquement) n'auront d'effet que sur la dernière liste! Donc j'ai beau appuyer sur tous mes boutons recréés, ça ne re/dépliera le div (et changera le bouton) que de la dernière liste!
Le bouton de la dernière liste, quant à lui, fonctionne bien : ça affiche mon div et change mon bouton + en - et inversement.

Voici le code que j'utilise pour reconstruire l'arborescence décrite plus haut. Un peu long mais rien de bien méchant.

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
var nouvelleZone = document.createElement("li");

	nouvelleZone.setAttribute("id", 'LP_' + sauvegardeIdLp + '_' + infos["zone"]);
	nouvelleZone.setAttribute("className","actif2");
	
	var a = document.createElement("a");
		a.onclick = function() {afficherCacher('contenuZdc' + infos['zone'] + 'Lp' + sauvegardeIdLp); changerBouton('LP_' + sauvegardeIdLp + '_' + infos['zone'] + '_bouton'); };
		
		var img = document.createElement("img");
			img.setAttribute("id",'LP_' + sauvegardeIdLp + '_' + infos["zone"] + '_bouton');
			img.setAttribute("src","arbo_picto_noeudplus.gif");
		a.appendChild(img);
	nouvelleZone.appendChild(a);
	
	var span = document.createElement("span");
		span.setAttribute("className","handle orange");
		span.appendChild(document.createTextNode(intituleZone));
	nouvelleZone.appendChild(span);

	var div = document.createElement("div");
		div.setAttribute("id",'contenuZdc' + infos["zone"] + 'Lp' + sauvegardeIdLp);
		div.style.setAttribute("cssText","display:none;");
		
		var ul = document.createElement("ul");
			ul.setAttribute("id",'LP_' + sauvegardeIdLp + '_' + infos["zone"] + '_contenu');
			
			descendants = $(element.id).down('ul').immediateDescendants();
			descendants.each(function(descendant){
				infosD = parserId(descendant.id,0);
				
				var liD = document.createElement("li");
					liD.setAttribute("id",'LP_' + sauvegardeIdLp + '_' + infosD["zone"] + '_' + infosD["ouvrageParent"]);
					liD.setAttribute("className","actif2");
					var spanD = document.createElement("span");
						spanD.setAttribute("className","handle");
						spanD.appendChild(document.createTextNode(descendant.down('span').innerHTML));
					liD.appendChild(spanD);
				ul.appendChild(liD);
			});
			
		div.appendChild(ul);
	nouvelleZone.appendChild(div);

//On finit par ajouter la nouvelle balise "li" (la zone entiere) au bloc de destination
conteneurDestination.appendChild(nouvelleZone);

Je vous le répète. Le code marche parfaitement la première fois mais pose problème à partir de la deuxième fois.

J'ai tenté avec IE Developper Toolbar de voir ce qu'il y avait dans mon attribut onclick mais il n'affiche apparemment pas les valeurs des attributs ajoutés dynamiquement (doit etre pareil dans Firebug).

Voilà, si qqun a une idée, ça serait cool parce que moi je galère vraiment. Si vous avez besoin de plus de précisions sur le code, n'hésitez pas à demander.

[SpaceFrog]

non sous firefox tu peux faire aficher le code généré ...

Mais bon ...

L'id est il modifié ???
un id doit être unique sur une page ...

[thibane]

Salut,

L'id est biensûr modifié et bien évidemment unique. Une autre idée?

[thibane]

Bonjour,

Mon problème n'est toujours pas résolu et il va bien falloir que je le résolve un jour ou l'autre. (surtout pour la boite ou je travaille^^)

Après moultes recherches, j'ai cru comprendre qu'il pouvait y avoir des soucis à générer dynamiquement des évènements onclick sur des éléments, ceci sous IE.

Quelqu'un a-t-il des exemples de création dynamique d'éléments auxquels serait attaché un évènement onclick plus ou moins complexe?
Parce que je tourne en rond, j'ai déjà essayé la méthode classique (DOM) createElement, la méthode Prototype new Element mais rien n'y fait, toujours un comportement bizarre.

Merci à ceux qui me répondront, j'en ai vraiment besoin..
++

[aliechti]

Bonjour,

J'utilise quelque chose comme ceci est cela fonctionne parfaitement ;-)

Code :

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

1
2
3
4
(...)
var a = document.createElement("a");
a.href = "javascript:do_the_job(infos['zone'],sauvegardeIdLp)";
(...)

Et définir encore une fonction javascript dans la page:

Code :

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

1
2
3
4
5
function do_the_job(info, sauvegarde)
{
  afficherCacher('contenuZdc' + info + 'Lp' + sauvegarde);
  changerBouton('LP_' + sauvegarde+ '_' + info + '_bouton');
}

Meilleures salutations

A+

[DoubleU]

Tu peux montrer comment le code javascript que tu as mis est appelé? surtout en fait comment tu passes les paramètres sauvegardeIdLp et infos["zone"]