Discussion :

[thibane]

Bonsoir à tous

Je m'arrache les cheveux sur le problème suivant. Je commence par cloner une balise "li" et tout son contenu.
Ensuite, avec prototype, j'arrive à accéder à à peu près tout ce que je veux pour le modifier et ainsi ajouter un nouveau noeud paramétré comme je l'entends et ou je veux.

Là ou la bizarrerie intervient, c'est que, qu'il s'agisse d'IE ou de FF, lorsque je finis par bloc.insert(zoneDupliquee,bloc), mon élément est bien dupliqué mais avec un attribut left d'une centaine de px, pareil pour top et enfin une opacité de 0,7. N'importe quoi en gros.

J'ai vérifié sous firebug et sous IE web developper (ou qqchose comme ca), en effet lorsque je supprime le left, le top et que je mets l'opacité à 100 (ou 1 sous FF), mon élément se trouve bien au bon endroit comme il faut.

Bizarre non..?

Voici le code si ça peut aider.

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
 
var zoneDupliquee = $(element.id).cloneNode("true");
 
//Modification de la zone dupliquee
 
//Recuperation de l'id de la balise li
idLi = zoneDupliquee.down('li').getAttribute("id");
 
temp = idLi.split("_");
idZone = temp[1];
 
zoneDupliquee.setAttribute("id",sauvegardeIdLp + "_" + idZone);
zoneDupliquee.addClassName('debugue');
					zoneDupliquee.down('a').setAttribute("onclick","afficherCacher('contenuZdcLp" + idZone +"');changerBouton('LP_" + idZone + "_bouton');");
 
					zoneDupliquee.down('img').setAttribute("id","LP_" + idZone + "_bouton");
 
					zoneDupliquee.down('div').setAttribute("id","contenuZdcLp" + idZone);
 
					zoneDupliquee.down('ul').setAttribute("id",sauvegardeIdLp + "_" + idZone + "_contenu");
 
contenuZone = zoneDupliquee.down('ul').immediateDescendants();
 
for(c=0;c<contenuZone.length;c++){
	idTemp = contenuZone[c].getAttribute("id");
	idSplitTemp = idTemp.split("_");
	nouvelId = sauvegardeIdLp + "_" + idSplitTemp[1] + "_" + idSplitTemp[2];
						contenuZone[c].setAttribute("id",nouvelId);
						contenuZone[c].down('span').addClassName('orange');
}
 
//Fin modification de la zone dupliquee		
 
//On recupere le bloc de destination
bloc = $(conteneurDestination.id);
 
bloc.insert(zoneDupliquee,bloc);

PS: j'ai tenté d'affecter une nouvelle classe à ma balise "li" dupliquée (avec la ligne zoneDupliquee.addClassName('debugue') ) en attribuant explicitement une opacité maximale et des marges (left et top) à 0 mais ça ne fonctionne pas. Sous firebug, toute ma classe CSS est "rayée", je ne sais pas pourquoi. En faisant une recherche, j'ai juste appris que lorsqu'un attribut est rayé, il n'a plus d'effet.. (super.. ) mais je n'en connais pas pour autant la raison..

J'en fais donc appel à vous.

[SpaceFrog]

essaye avec des instuctions ne sortant pas de la lib prototype ...

Code :

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

zoneDupliquee.style.className='debugue'

après l'avoir appendé ...

Tu dois utiliser une instruction de prototype qui rajoute un style a un moment ou à un autre, le style ne se créé pas tout seul ...

[thibane]

Ok je vais essayer. (Par contre moi j'ai réellement besoin d'ajouter une classe car l'élément en possède déjà une et avec l'instruction element.style.className il va me remplacer la précédente)

[SpaceFrog]

non pas si tu fais

Code :

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

obj.style.className=obj.style.className+' autreclass'

[thibane]

Bonsoir.

J'ai testé ce que tu m'as dit Spacefrog.

J'ai remplacé bloc.insert(zoneDupliquee,bloc); par bloc.appendChild(zoneDupliquee)

D'autre part, j'ai fait ce que tu m'as dit pour la classe :
zoneDupliquee.className =+ " debugue";

(debugue étant une classe CSS qui fait ça :

Code :

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

1
2
3
4
5
.debugue{
	opacity : 1;
    	left: 0px;
	top: 0px;
	}

)

Et bien je me retrouve toujours avec un style qui fait n'importe quoi :

<li id="LP_1_2" class="sortable debugue" style="position: relative; z-index: 1000; left: 130px; top: 20px; opacity: 0.7;">

Voilà, si je retire avec Firebug tout ce qui est en rouge, mon élément se trouve exactement là ou je veux et comme je veux.

J'ai tenté de rajouter la classe au dernier moment, c'est à dire juste avant d' "appendChilder", toujours la même chose. Assez déroutant non..?

[thibane]

Je viens de résoudre le problème.
Le bug viendrait semble-t-il de la méthode clone.

J'ai essayé d'attribuer "à l'ancienne" () les style à mon bloc dupliqué, juste avant le appendChild toujours :

Code :

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

1
2
zoneDupliquee.style.left = "0px";
zoneDupliquee.style.top = "0px";

au lieu de :

Code :

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

zoneDupliquee.className = "classe_qui_fait_la_meme_chose_quau_dessus";

Et ça marche très bien: aucun style, qu'on pourrait qualifier de "chelou", n'est appliqué à l'insu de mon plein gré..

Je ne sais pas si c'est un bug de la méthode clone mais en tout cas, ça me rereredébloque..

Bonne soirée à tous

[SpaceFrog]

Très curieux ça...
Je me sers assez soucvent de la méhode clodeNode, mais je n'ai jamais rencontré ce genre de souci d'application de style.
Je vais effectuer quelques tests ...