[DOM] Comportement anormal après createElement
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:
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:
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.
Astuce avec javascript ;-)
Bonjour,
J'utilise quelque chose comme ceci est cela fonctionne parfaitement ;-)
Code:
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:
1
2
3
4
5
| function do_the_job(info, sauvegarde)
{
afficherCacher('contenuZdc' + info + 'Lp' + sauvegarde);
changerBouton('LP_' + sauvegarde+ '_' + info + '_bouton');
} |
Meilleures salutations
A+
