Discussion :

[koloma]

bonsoir la communauté,

j'ai un petit soucis avec ce bout de code

mon but est de recuperer un formulaire vierge (div->'t0') qui en display:none pour le cloner à chaque clique sur un bouton de confirmation du formulaire precedent...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
    function dupliquer() {
        num=document.getElementById('numero').value;
        num++;
        var copie = $('#t0').clone();
        oldId=copie.attr('id');
        copie.id="t"+num;
        copie.appendTo('.outer');
        document.getElementById(copie.id).style.display="inline";
        document.getElementById('numero').value=num;
    }

le clonage se passe bien, l'insertion de ma nouvelle div dans ma div principale (.outer) est nickel, l'affectation de la nouvelle id (t1,t2,t3 a partir de t0) aussi...
les test en desactivant le display:none sur la div T0 le montre..

par contre, impossible de modifier le style juste apres le clonage... document.getElementById(copie.id).style.display="inline"; ne fonctionne pas...
Je debute en JS et je seche completement....

Merci de votre aide

[Watilin]

Cette ligne :

Code :

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

document.getElementById(copie.id).style.display = "inline";

fait précisément ce qu'elle est censée faire. Mais ce n'est sans doute pas ce que tu penses.

Un id doit être unique dans la page. Il est indiqué dans la doc de la méthode .clone qu'il est déconseillé de clôner des éléments ayant un id. En clônant l'élément #t0 tu te retrouves avec deux éléments dans ta page portant le même id.

En théorie, s'il existe plusieurs éléments avec le même id, le résultat de getElementById est indéfini. En pratique, on peut s'attendre à recevoir le premier des éléments correspondants, dans l'ordre du DOM. Mais rien ne le garantit : ça dépend de l'implémentation.

Donc ce qui se passe concrètement, c'est que cette ligne de code modifie le style de l'élément original, et non du clône.

Ma meilleure proposition pour résoudre ton problème c'est de donner un nouvel id au clône dès qu'il est créé, et ne pas oublier d'utiliser ce nouvel id à la place de l'ancien.

[Bovino]

Code :

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

1
2
3
var copie = $('#t0').clone();
oldId=copie.attr('id');
copie.id="t"+num;

Ta variable copie est un objet jQuery. Elle possède donc bien une méthode attr() permettant de récupérer la valeur d'un attribut, en revanche, puisque ce n'est pas un objet DOM, elle ne possède pas de propriété id permettant d'affecter un id.

l'affectation de la nouvelle id (t1,t2,t3 a partir de t0) aussi...

Du coup, non, cette partie ne fonctionne pas.