Renommer l'id d'un <li>

Salut à tous,

J'utilise la librairie AJAX de http://script.aculo.us, pour gérer des listes d'éléments triables.
Exemple ici : http://wiki.script.aculo.us/scriptac...tableListsDemo

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<ul id="colstructure" class="struct"> <li id="colstructure_colstructuretxt"><div class="drag_drop"><img src="/pix/ico_txt.png"></div></li> <li id="colstructure_colstructuretab"><div class="drag_drop"><img src="/pix/ico_tab.png"></div></li> <li id="colstructure_colstructureimg"><div class="drag_drop"><img src="/pix/ico_img.png"></div></li> </ul>   <ul id="colcentre" class="struct"> <li id="colcentre_colcentretxt"><div class="drag_drop"><img src="/pix/ico_txt.png"></div></li> <li id="colcentre_colcentretab"><div class="drag_drop"><img src="/pix/ico_tab.png"></div></li> <li id="colcentre_colcentreimg"><div class="drag_drop"><img src="/pix/ico_img.png"></div></li> </ul>

---

J'ai la possibilité de faire passer les éléments d'une liste à l'autre grace à la classe javascript Sortable.
Je déclare les listes ainsi :

Code:

---

1 2 3 4 5

<script type="text/javascript"> Sortable.create("colcentre", {dropOnEmpty:false,handle:'drag_drop',containment:["colcentre","colstructure"], constraint:false, onChange:function(){updateStructure()}}); Sortable.create("colstructure", {dropOnEmpty:false,handle:'drag_drop', containment:["colcentre","colstructure"], constraint:false, onChange:function(){updateStructure()}}); </script>

---

Je souhaiterai que si l'on déplace un élément d'une liste à l'autre, dans la liste de départ l'élément transféré soit recréé.
Celà ne serait plus un déplacement d'élément d'une liste à l'autre mais une copie d'élément d'une liste à l'autre.

Pour celà, lorsque que déplace un élément d'une liste à l'autre, j'appelle la fonction updateStructure() qui lance une requête XmlHttpRequest qui va recréer le contenu de ma liste de départ de la manière suivante :
(la langage de l'application est JSP)

Code:

---

1 2 3 4 5 6 7 8 9 10 11

out.print(" document.getElementById('colstructure').innerHTML='"); out.print("<li id=\"colstructure_colstructuretxt\">"); out.print(" <div class=\"drag_drop\"><img src=\"/pix/ico_txt.png\"></div>"); out.print("</li>"); out.print("<li id=\"colstructure_colstructuretab\">"); out.print(" <div class=\"drag_drop\"><img src=\"/pix/ico_tab.png\"></div>"); out.print("</li>"); out.print("<li id=\"colstructure_colstructureimg\">"); out.print(" <div class=\"drag_drop\"><img src=\"/pix/ico_img.png\"></div>"); out.print("</li>';");

---

Mon problème est que l'élément déplacé n'a pas changé d'id, il se nomme toujours (par exemple) <li id="colstructure_colstructuretxt">.
La structure du nom est importante dans mon cas : "Id de la liste auquel il appartient"_"chaine sans importance".

Donc ma méthode qui consiste à récréer la liste de départ, ne me permet plus de déplacer aucun éléments par la suite, car je me retrouve avec deux élément avec le meme ID.

Est-il possible de renommer l'id d'un élément une fois qu'il a été déplacé ?

Avez vous une autre solution ou un autre axe de recherche à mon problème ??

pourquoi ne passes tu pas un argument a updateStructure que tu rajouteras a l'id dans ta page jsp ?

sinon peut etre avec un :

Code:

---

document.getElementById('unid').id='unautreid';

---

Ok, je vais tester ça tout de suite. Je vous tiens au courrant !!

Merci.

J'ai utilisé :

Code:

---

document.getElementById('unid').id='unautreid';

---

pour renommer l'id de mon élément et ça fonctionne très bien !

De plus, j'avais oublié de détruire mes listes avant de les recréer :

Destuction des listes :

Code:

---

1 2	Sortable.destroy("colcentre"); Sortable.destroy("colstructure");

---

Re-création des listes :

Code:

---

1 2

Sortable.create("colcentre", {dropOnEmpty:false,handle:'drag_drop',containment:["colcentre","colstructure"], constraint:false, onChange:function(){updateStructure()}}); Sortable.create("colstructure", {dropOnEmpty:false,handle:'drag_drop', containment:["colcentre","colstructure"], constraint:false, onChange:function(){updateStructure()}});

---

Encore merci pour tout !!! Je commençais à m'arracher les cheveux !! :wink: