Copier une liste <select> à l'identique

Version imprimable

Voir 40 message(s) de cette discussion en une page

20/11/2009, 14h13
E.Bzz
Citation:

Envoyé par baggie

normal que dans le code source de ma page je n'ai que ma première liste qui s'affiche même s'il y en a plusieurs ?

Oui : le code source représente le code initial de la page, sans les modif effecuées dynamiquement via JS ;)

Citation:

Envoyé par baggie

j'ai un problème de colspan (cf image, il faudrait que toutes mes listes soient alignées)

Visiblement le clonage a foiré :aie:

Faudrait voir (tout en généré, hein : pas le code PHP) :
- Le code HTML initial
- Le code JS de clonage
- LE code HTML résultant
A+

Alors, c'est parti !

Code HTML initial :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<tr id="Assureur">
  <td>Assureur</td><td>
	<select id="46">
                  <option value="0-0">Sélectionnez une société</option>
                  <option value="13-ste1">ste1</option>
                  <option value="14-ste2">ste2</option>
        </select></td>
  <td><input type="button" name="add" value="+" onclick="add_soc('46','Assureur');"/>
</td></tr>
<tr><td><div id="div46" style="display:none;"></div></td></tr>

Code JS de clonage :

Code:

1
2
3
4
5
6
7
8
 
function add_soc(id,nom)
{
	document.getElementById("div"+id).style.display = 'block';
	var leTrACopier = document.getElementById(nom);
	var laDivOuAjouterLaListe = document.getElementById("div"+id);
	laDivOuAjouterLaListe.appendChild(leTrACopier.cloneNode(true));
}

Code HTML résultant (pour la liste de base + 2 listes clonées) :

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
 
<tr id="Assureur">
         <td>Assureur</td>
         <td>
            <select id="46">
                <option value="0-0">Sélectionnez une société</option>
                <option value="13-ste1">ste1</option>
                <option value="14-ste2">ste2</option>
            </select>
         </td>
         <td>
             <input type="button" onclick="add_soc('46','Assureur');" value="+" name="add"/>
         </td>
  </tr>
  <tr>
       <td>
             <div id="div46" style="display: block;">
             <tr id="Assureur">
                 <td>Assureur</td>
                 <td>
                     <select id="46">
                            <option value="0-0">Sélectionnez une société</option>
                            <option value="13-ste1">ste1</option>
                            <option value="14-ste2">ste2</option>
                     </select>
                 </td>
                  <td>
                      <input type="button" onclick="add_soc('46','Assureur');" value="+" name="add"/>
                 </td>
              </tr>
               <tr id="Assureur">
                 <td>Assureur</td>
                 <td>
                     <select id="46">
                            <option value="0-0">Sélectionnez une société</option>
                            <option value="13-ste1">ste1</option>
                            <option value="14-ste2">ste2</option>
                     </select>
                 </td>
                  <td>
                      <input type="button" onclick="add_soc('46','Assureur');" value="+" name="add"/>
                 </td>
              </tr>
</div>
</td>
</tr>

20/11/2009, 15h21
kernelfailure

Mais tu es conscient que tu multiplies des ids qui devraient être unique ?
20/11/2009, 15h27
kernelfailure

Ton TR 'assureur' a par ailleurs 3 TDs
Le TR suivant n'en a qu'un seul :roll:
20/11/2009, 22h38
baggie

Citation:

Envoyé par kernelfailure

Mais tu es conscient que tu multiplies des ids qui devraient être unique ?

ConscientE, et oui je m'en suis rendue compte, faut que je fasse une espèce d'incrémentation, c'est prévu ^^

Pour l'histoire des tr et des td je verrai ça lundi, là weekend !
Merci de te pencher sur mon problème :D

Bon j'ai regardé le problème de mes tr et td.

Voici mon code de base (quand je n'ai pas appuyé sur +) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <tr id="Assureur"> <td>Assureur</td> <td> <select id="46"><option ........> </select> <input type="button" onclick="add_soc('46','Assureur');" value="+" name="add"/> </td> </tr> <tr> <td> <div id="div46" style="display: none;"/> </td> </tr>
Est-ce que mon problème ne viendrait pas du fait que mon div est entre un <td></td> ? et que du coup mon <tr> se calle à l'intérieur et ne correspond qu'à une cellule de mes autres <tr><td> ? (et donc que je n'ai qu'un td au lieu des deux de base)

Si ca vient de là, comment contourner le problème ?

24/11/2009, 09h21
E.Bzz

Citation:

Envoyé par baggie

Est-ce que mon problème ne viendrait pas du fait que mon div est entre un <td></td> ?

Non, plutôt de l'absence du </div> :aie:

A+
24/11/2009, 09h26
baggie
Sauf que dans ma page, j'ai écrit ce code :
Code:

1 2 <tr><td><div id="div'.$idcat.'" style="display:none;"></div></td></tr>
Et dans fireBug, je n'ai que :
Code:

1 2 3 4 5 6 <tr> <td> <div id="div46" style="display: none;"/> </td> </tr>
:calim2: Je comprends paaaaaaaas.

PS : je suppose que modifier un id est une chose infaisable pour avoir des id de select différents ? (ceux que l'on copie doivent avoir un id différent du select source pour ensuite tout récupérer dans une requête vers une bdd)
24/11/2009, 16h48
kernelfailure

Effectivement, c'est pas normal que ton </DIV> ait disparu. A creuser.

Pour tes TR :
TR1 TD1 TD2
TR2 TD3

Pour que ton tableau n'est pas l'air bancal, sur ton TR2, soit tu ajoutes un TD, soit tu attributs un colspan=2 à ton unique TD (TD3).

Si je ne me trompe pas, ton DIV te sert simplement d'id pour ton insertion.
Dans ce cas, un simple :

Code:

leTrACopier.parentNode.appendChild(leTrACopier.cloneNode(true));

pourrait te suffire.
Ou encore :

Code:

leTrACopier.parentNode.insertBefore(leTrACopier.cloneNode(true),leTrACopier.nextSibling);
24/11/2009, 16h54
baggie

Citation:

Envoyé par kernelfailure

Ou encore :

Code:

leTrACopier.parentNode.insertBefore(leTrACopier.cloneNode(true),leTrACopier.nextSibling);

:ccool: Nickel !

Par contre quand on a ce code là, est-il possible de modifier l'id de l'élément que l'on va ajouter ? (pour pouvoir enregistrer dans la base ensuite tous les choix des select)
24/11/2009, 17h08
E.Bzz

Citation:

Envoyé par baggie

(pour pouvoir enregistrer dans la base ensuite tous les choix des select)

Même si l'ID doit effectivement être rendu unique, c'est le name qui est utilisé pour l'envoi au serveur via le formulaire ;)

A+
25/11/2009, 00h56
kernelfailure

Et donc, il te suffit de récupérer ton clone dans une variable (que tu utiliseras pour l'insert ensuite). Par le biais de cette variable, tu peux ajuster tout ce que tu veux (id, name, style, etc...).

Donc, bien sur que tu peux changer l'ID.
25/11/2009, 08h17
baggie

Ah oui en effet ! :D

Par contre y'a quelque chose que je ne vois pas comment faire : si je veux récupérer mon clone dans une variable, j'aurai bien fait getElementById('monclone'), mais comme mon élément copié et mon élément source ont le même id, comment je peux récupérer juste le clone ?

A la base j'ai ceci :

Code:

var leTrACopier = document.getElementById(nom);

Et le clonage :

Code:

leTrACopier.parentNode.insertBefore(leTrACopier.cloneNode(true),leTrACopier.nextSibling);

Et du coup je vois pas comment faire la différence ... =/

EDIT : si je souhaite récupérer ce qui est choisi dans mon <select>, il ne faut pas plutôt que je copie chacun de mes éléments (le <td> avec le nom de la catégorie, le select avec la liste des sociétés), pour pouvoir ensuite récupérer via $_POST ce qu'il y a dans mon select ?

A moins qu'en copiant mon tr je suis capable de récupérer les différents éléments contenus dedans ?

Ca ne me dit toujours pas comment récupérer l'id de l'élément venant d'être copié (la copie, pas la source) x)

EDIT 2 : je viens de voir qu'en copiant mon <tr> je pourrai probablement avoir accès aux autres éléments dedans par firstchild et lastChild. Pour firstChild du <tr>, ça me donnerait mon <td> avec le nom de ma catégorie -> OK. Pour le lastChild, j'obtiendrai mon <select> ou le dernier <option> de celui-ci ?
25/11/2009, 11h35
kernelfailure
Bah, tout simplement :
Code:

1 2 3 4 5 6 var monClone = leTrACopier.cloneNode(true); monClone.id = 'unNouvelID'; OU monClone.setAttribute("id", 'unNouvelID'); ... leTrACopier.parentNode.insertBefore(monClone,leTrACopier.nextSibling);
Mais, suivant l'ordre d'insertion que tu souhaites, tu peux aussi changer l'id de leTrACopier juste après insertBefore.
Comme les insertions, sous cette forme, se font après le TR d'origine. A toi de voir si tu insère toujours en position 2 où après le dernier ajouté ;)
25/11/2009, 12h07
baggie
Citation:

Envoyé par kernelfailure

Bah, tout simplement :

...

Oula, oui en effet x) L'art de se compliquer la vie made by moi.
Bref. Merci pour ceci !

Et un autre problème (décidément) :
- j'ai mon <tr> avec son id.
- je veux récupérer le <select> se trouvant dans ce <tr>
- arborescence : <tr id><td>nomcategorie<td>'vide'<select name = ...>

- en faisant des nextSibling, est-ce que je peux mettre un name à mon <select> pour le récupérer en POST après ?

- j'ai testé ce genre de chose :
Code:

1 2 3 4 5 var leTdNeutre = leTrACopier.firstChild; var leTdCopie = leTdNeutre.nextSibling; var leSelect = leTdCopie.nextSibling; leSelect.setAttribute('name','nomduselect');
mais euh bon ... marche pas vraiment :aie:
De plus, comme je copie le <tr> avant, en entier, est-ce qu'il est possible, une fois copié de modifier les attributs de ses éléments ?
25/11/2009, 12h10
E.Bzz

Les nextSibling risque de réagir différemment suivant les navigateurs (cf. FAQ sur la gestion des noeuds vides).

Mieux vaudrait pointer sur ton select via

Code:

document.getElementById('id_du_tr').getElementsByTagName("select")[0]

;)

EDIT : de plus, IE n'aime pas (enfin ... ne sais pas faire correctement :aie: ) modifier les name dynamiquement. Une recherche sur le forum pour trouver les méthodes de contournements ...

A+

Merci E.Bzz :D

J'ai fait ceci :
Code:

1 2 3 4 5 6 7 8 9 10 function add_soc(id,nom) { document.getElementById("div"+id).style.display = 'block'; var leTrACopier = document.getElementById('tr'+nom); var laDivOuAjouterLaListe = document.getElementById("div"+id); var leSelect = document.getElementById(id); leSelect.setAttribute('name','select'+nom); leTrACopier.parentNode.insertBefore(leTrACopier.cloneNode(true),leTrACopier.nextSibling); }
et ça fonctionne comme je le souhaite !

Maintenant si tu dis que IE fait un peu nawak avec le setAttribute (enfin à ce que j'ai compris de ton post), bah je vais chercher autre chose alors ...

25/11/2009, 12h28
E.Bzz

Citation:

Envoyé par baggie

Maintenant si tu dis que IE fait un peu nawak avec le setAttribute (enfin à ce que j'ai compris de ton post), bah je vais chercher autre chose alors ...

Essaye la solution en majuscule ...
Le name ne sera pas reconnu dans la page, mais devrait bien transmis au serveur ;)

A+
25/11/2009, 13h01
kernelfailure
Citation:

Envoyé par E.Bzz

Les nextSibling risque de réagir différemment suivant les navigateurs (cf. FAQ sur la gestion des noeuds vides).

La seule différence que j'ai constaté sur les nodes, vient de l'ordre des datas/tags (Principalement sous Safari).
Dans ce cas, il faut tester le type du node.

Bien sur, cela n'est valable que si l'element peut contenir des DATAS (cf. DTD).

En l'occurrence, pas de DATA sur les TR.
Celà dit, je pencherais aussi pour le ByTagName ;)

Pour les NAME via dom :
Code:

1 2 3 (...).setAttributeNode(document.createAttribute('Name')); // 'N' (...).setAttribute('name', strName);

Voir 40 message(s) de cette discussion en une page