Discussion :

[Cyanatide]

Bonjour,
J'ai une table utilisateur, chaque utilisateur possède 0 ou plusieurs clé (clé Salle 1, clé salle 2 etc...)
Quand je modifie un utilisateur, j'ai un bouton "Ajouter une clé" appel la fonction addkey() qui fait apparaitre une dropdownlist avec toutes les clés existantes. J'appuye donc autant de fois sur le bouton d'ajout de clé que l'utilisateur en possède.
Mon problème en fait c'est de savoir comment passer le tableau de clé généré par php. Je vois trois solutions:
- Je passe la tableau en paramètre de l'appel de la fonction addkey()
- Lors de la génération php de la page, je crée une variable js globale contenant mon tableau
- Dans ma fonction addkey, je récupère le code html de ma dropdown list, la copie et change les id

Je ne sais pas trop ce qui est le mieux, est ce que vous avez d'autres idées? Existe-t-il une "norme"?
Merci d'avance.

[NoSmoking]

Bonjour,
je dois admettre qu'il serait sympa de reformuler/éclaircir ton problème, j'ai du mal à comprendre ce que tu souhaites faire

[Cyanatide]

En fait:
- Sur ma page, j'ai un tableau dont la première colonne est une dropdownlist générée depuis ma base de donnée par php qui me liste toutes les clés existantes de l’entreprise:

Code html :

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

1
2
3
4
<option value="1">Salle Serveur</option>
<option value="2">Local Technique</option>
<option value="3">Hall d'entrée</option>
...

- J'ai créé un bouton qui ajout une ligne a mon tableau par javascript
- Je veux que cette ligne reprenne le format de la première avec exactement la même dropdownlist
- Le but étant que quand je soumet mon formulaire, chaque ligne du tableau (= chaque clé sélectionné) soit ajouté au trousseau de clé de mon utilisateur).

Ma question, c'est tout simplement de savoir quel est la meilleure méthode pour passer ma list d'option de php à javascript pour que lors d'un ajout de ligne, javascript soit capable de regénérer ma dropdownlist sans avoir recours au serveur (j'aime autant éviter une requête Ajax pour si peu).
J'avais pensé au solutions que je cite dans mon message précédent mais je ne suis pas sur de laquelle s'adapte le mieux a mon besoin.

j'espère que c'est plus clair!

[Golgotha]

Bonjour,

On peux copier une liste assez facilement avec jQuery en utilisant $.clone() : http://jsfiddle.net/cx9kbscs/

[Cyanatide]

Effectivement la fonction clone est très intéressante, par contre je me retrouve avec deux fois le même id de liste. Cela va être gênant lors de la récupération des données non?

[Bovino]

A noter qu'il existe aussi cloneNode() qui ne nécessite pas jQuery...

par contre je me retrouve avec deux fois le même id de liste. Cela va être gênant lors de la récupération des données non?

Non, le doublon de l'id sera gênant, mais pour d'autres choses (si tu as besoin de manipuler l'élément ultérieurement par exemple), pas pour la récupération des données.
En revanche, c'est l'attribut name qui va poser des problèmes, il faut donc soit le modifier avant l'insertion (de même que l'id), soit l'écrire sous forme de pseudo-tableau (name="nom[]") qui te permettra de créer un vrai tableau côté PHP que tu pourras alors parcourir.

[Cyanatide]

Ok, merci pour ces précisions!
Voici donc ma fonction:

Code :

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

1
2
3
4
5
6
7
8
9
function addKeys(user) {
    var table = document.getElementById("Key_"+user);
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
 
    cell1.innerHTML = $("#ma-liste").clone().attr('id', 'new_id').attr('name', 'new_name').html();
    cell2.innerHTML = "<input type='text' value=''>";
}

Pour mes test, j'ai pris la même liste que celle fournie dans l'exemple de jsfiddle.
J'ai cependant un problème: dans la nouvelle cellule de mon tableau je ne récupère que les balise "option" de mon select, et non le select lui même ce qui fait que cela n'affiche pas une liste déroulante comme dans l'exemple. Si je veux récupérer la liste déroulante complète je suis obligé de faire un div autour de mon select pour que le clone me retourne un select complet.
J'ai l'impression que cela vient de la focntion html() que j'appel pour remplir la cellule de mon tableau car si je fais comme dans l'exemple un append à dans une div ça marche... Auriez vous une syntaxe qui m'évite de définir a chaque fois un id a ma cellule?

[Bovino]

C'est normal... .html() renvoie le contenu HTML d'un élément. Ici, l'élément de référence étant le select, son .html() correspond donc aux options.
De toutes façons, mélanger comme ça du code jQuery et JavaScript natif est assez maladroit et déconseillé.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function addKeys(user) {
    var table = document.getElementById("Key_"+user);
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
 
    var $liste = document.getElementById("#ma-liste");
    $liste.id = 'id2';
    $liste.name = 'name2';
 
    cell1.appendChild($liste);
    cell2.innerHTML = "<input type='text' value=''>";
}

[Cyanatide]

Impeccable, merci beaucoup ! (attention, petite coquille dans ton code: supprimer le # dans document.getElementById("#ma-liste")

[Bovino]

Oui, t'as raison, mais il est pas bon du tout mon code, j'ai oublié le cloneNode() !

Code :

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

var $liste = document.getElementById("ma-liste").cloneNode(true);

[Cyanatide]

Exact mais tu m'avais déja parlé de cette fonction dans ton premier message, merci encore.