Discussion :

[baggie]

Bonjour,

je pense que mon problème fait appel à de l'AJAX, à moins que je ne me complique pour rien (et ça ce serait gentil de me le dire ).

J'ai un formulaire avec plusieurs listes déroulantes, alimentées par le nom de sociétés provenant de la base de données. Chaque liste correspond à une catégorie différente.

Ex :
Assureur - <select></select> "+"
Installateur - <select></select> "+"
[...]

A côté de ces listes, j'ai un bouton "+" associé. Lorsque l'on clique dessus, j'aimerai faire apparaître juste en dessous de ma liste, la même liste avec le même nom de catégorie.

Ex :
Assureur - <select></select> "+" > je clique et ça affiche :

Assureur - <select></select>

Donc j'aurai deux fois la même liste, et je pourrai sélectionner une autre société appartenant à la même catégorie.

J'ai pensé au fait qu'il y avait les listes à choix multiples, mais esthétiquement parlant sur ma page, ça ne ferait pas terrible.
C'est pourquoi je cherche une autre solution !

J'ai donc commencé par créer une ligne avec le nom de ma catégorie, et la liste déroulante des sociétés, puis le bouton + :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$nomcat = $catsoc['nom_categorie_societe'];
$idcat = $catsoc['id_categorie_societe'];
echo '<tr>';
echo '<td>'.$nomcat.'</td>
	<td><select name="'.$idcat.'">
			<option value="0-0">Sélectionnez une société</option>';
			$req = mysql_query("SELECT id_societe, nom_societe FROM societe ORDER BY nom_societe ASC;");
			while ($donnees = mysql_fetch_array($req))
			{
				echo '<option value="'.$donnees['id_societe'].'-'.$donnees['nom_societe'].'"'. $selected.'>'.$donnees['nom_societe'].'</option>';
			}
			echo '</select></td><td>';
			echo '<input type="button" name="add" value="+" onclick="add_soc('.$idcat.$nomcat.');"/></td></tr>';

Juste en dessous je me suis dit qu'il fallait créer un div pour afficher la nouvelle liste déroulante :

Code :

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

1
2
 
echo '<tr><td><div id="div'.$idcat.$nomcat.'" style="display:none;"></div></td></tr>';

Et ma fonction add_soc() appelée sur le onClick du bouton + :

Code :

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

1
2
3
4
5
6
 
function add_soc(id)
{
	document.getElementById('div'+id).style.display = 'block';
	document.getElementById('div'+id).innerHTML = '<select name="'+id+'"><option></option></select>';
}

Et pour le moment ça s'arrête ici. Je pensais ensuite faire appel à une requête Ajax pour remplir ma liste déroulante, mais ça me ferait créer encore un div à l'intérieur de celui ci ?

J'ai l'impression que ça va faire beaucoup de choses en fait tout ça pour recopier un élément.
D'autant plus qu'à ce stade là, j'ai cette erreur qui s'affiche :

missing ) after argument list
[Break on this error] add_soc(45assureur);

Donc est-ce que je pars dans la bonne direction ? Est-ce que je me complique beaucoup trop ?
Un peu d'aide serait la bienvenue ^^

[DoubleU]

Si c'est juste pour copier exactement la liste, utilises plutot un cloneNode.

Code :

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

1
2
3
var laListeACopier = document.getElementById("lIdDeLaListeACopier")
var laDivOuAjouterLaListe = document.getElementById("lIdDeLaDivOuAjouterLaListe")
laDivOuAjouterLaListe.appendChild(laListeACopier.cloneNode(true)

[baggie]

J'ai utilisé ta solution :

Code :

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

1
2
3
 
echo '<input type="button" name="add" value="+" onclick="add_soc('.$idcat.');"/></td></tr>';
echo '<tr><td><div id="div'.$idcat.'" style="display:none;"></div></td></tr>';

Code :

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

1
2
3
4
5
6
7
 
function add_soc(id)
{
	var laListeACopier = document.getElementById(id)
	var laDivOuAjouterLaListe = document.getElementById("div"+id)
	laDivOuAjouterLaListe.appendChild(laListeACopier.cloneNode(true)
}

Dès l'entrée sur la page j'ai cette erreur :

missing ) after argument list

et ça me retourne cette erreur une fois testé :

add_soc is not defined
function onclick(event) { add_soc(45); }

Ce qui signifie que la fonction n'existe pas ?

[DoubleU]

Oui ^^

[kernelfailure]

...Parce que tu as oublié une fin de parenthèse

...(true))

[baggie]

Mais euuuuh, si elle est bien déclarée dans mon code, pourquoi qu'il me dit ça firebug ? Oo

Dès que j'ouvre la page j'ai cette erreur :

missing ) after argument list
[Break on this error] laDivOuAjouterLaListe.appendChild(laListeACopier.cloneNode(true);\n

EDIT : ben oui forcément ... x) et si je veux récupérer le nom de ma catégorie en plus ? Est-ce que je peux faire : add_soc(id,nom) puis ensuite faire deux appendchild ?

EDIT 2 :
j'ai testé :

Code :

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

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

avec :

Code :

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

echo '<input type="button" name="add" value="+" onclick="add_soc('.$idcat,$nomcat.');"/></td></tr>';

mais j'ai toujours cette erreur de parenthèse manquante, sauf que là je n'arrive pas à voir où :/ (et pour mettre id,nom dans ma fonction je sais pas trop comment faire non plus)

[E.Bzz]

Bonjour,

mais j'ai toujours cette erreur de parenthèse manquante,

la syntaxe étant correcte à présent, ça peut être un problème de cache

=> CTRL + F5 ?

A+

[baggie]

J'ai déjà tenté cette solution mais sans effet

Est-ce que c'est l'appel de ma fonction avec une virgule au milieu qui lui pose problème ? Quand je vois firebug > j'ai add_soc(idnom) sans aucune séparation.

Hors ma fonction est : add_soc(id,nom).

Est-ce que ça pourrait venir d'ici à tout hasard ?

EDIT : j'ai testé

Code :

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

onclick="add_soc('.$idcat.','.$nomcat.');"

et cette fois mon erreur est que "nomcategorie is not defined".

[E.Bzz]

Est-ce que ça pourrait venir d'ici à tout hasard ?

Ben oui évidemment

A+

[E.Bzz]

et cette fois mon erreur est que "nomcategorie is not defined".

Et comme il n'y a pas de "nomcategorie" dans le code que tu montres, c'est que tu as une autre erreur ailleurs

A+

[kernelfailure]

Tu devrais croire ton document HTML.

Ta virgule ne fait pas parti de ton echo PHP.

Code :

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

.','.

Il faut se fier à son document lorsqu'on est en javascript. C'est dingue ce qu'on voit comme code PHP sur ce forum Javascript...

[baggie]

Et comme il n'y a pas de "nomcategorie" dans le code que tu montres, c'est que tu as une autre erreur ailleurs

A+

j'ai mis nomcategorie pour dire que c'est ma variable nom qui avait un problème.

J'aurai pu dire en fait que j'obtiens : "assureur is not defined".

donc en gros ma variable nom dans la fonction n'a pas l'air de bien fonctionner x)

kernelfailure > euh j'ai pas tout compris, ça veut dire que j'ai mis du code php là où il fallait surtout pas ?

[E.Bzz]

donc en gros ma variable nom dans la fonction n'a pas l'air de bien fonctionner x)

Donc, comme quand il n'y a pas la virgule entre tes 2 paramètres ...
On peut voir le code actuel généré ?

A+

[E.Bzz]

j'ai mis du code php là où il fallait surtout pas ?

Dans les forums Javascript, HTML, CSS la règle est de poster le code généré.
Ne demande pas pourquoi, tu viens d'en donner la meilleurs l'illustration possible

A+

[kernelfailure]

euh j'ai pas tout compris, ça veut dire que j'ai mis du code php là où il fallait surtout pas ?

C'est une remarque générale.

Javascript étant côté client (navigateur), c'est donc ce context qui est important : La page vue par la navigateur.

PHP est côté serveur, donc en s'en fout. C'est bien évidement ce que PHP va générer qui importe : le résultat côté client.
Clairement, tu verra que ton echo est dans les choux et qu'il te manque ta virgule.

On n'est pas des compilateurs PHP

[baggie]

Hum ah oui je vois ...

Bon alors quand j'arrive sur la page j'ai ceci :

Code :

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

1
2
 
<input type="button" name="add" value="+" onclick="add_soc(45,assureur);"/></td></tr><tr><td><div id="div45" style="display:none;"></div></td></tr>

Et quand je clique sur mon bouton, rien de plus s'affiche. J'ai juste dans fireBug :

assureur is not defined
function onclick(event) { add_soc(45, assureur); }

C'est plus clair ou ... ?

[E.Bzz]

Comme de l'eau de roche !

Code :

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

add_soc('45','assureur')

A+

[baggie]

Ah ben oui ... merci !!
Ça fonctionne très bien maintenant, juste un petit détail : j'ai un saut de ligne entre mon <td> et mon <select>, comment pourrai-je l'enlever ?

Question : si dans mon <tr> j'ai un <td> et un <select>. Si je demande de cloner le <tr>, est-ce que du coup j'aurai tout le contenu qui va se cloner ?

[kernelfailure]

Ah ben oui ... merci !!
Ça fonctionne très bien maintenant, juste un petit détail : j'ai un saut de ligne entre mon <td> et mon <select>, comment pourrai-je l'enlever ?

Code HTML s.t.p. ?

Question : si dans mon <tr> j'ai un <td> et un <select>. Si je demande de cloner le <tr>, est-ce que du coup j'aurai tout le contenu qui va se cloner ?

Bah oui. Tout du <tr> au </tr>.

[baggie]

Parfait ! J'ai donc copié mon tr en entier et ça fonctionne !

Merci à vous

PS : juste un problème de colspan à changer x)

EDIT : 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 ?

Code :

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

1
2
3
4
5
 
<tr id="assureur"><td>assureur</td>
<td><select id="45">
		<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('45','assureur');"/></td></tr>
	<tr><td><div id="div45" style="display:none;"></div></td></tr>

EDIT 2 : j'ai un problème de colspan (cf image, il faudrait que toutes mes listes soient alignées) Voici ce que me donne firebug :

Code :

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

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
 
<tr id="Assureur">
     <td>Assureur</td>
     <td>
            <select id="46">
            </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>
                      </td>
                 </tr>
                 <tr id="Assureur">
                        <td>Assureur</td>
                       <td>
                               <input type="button" onclick="add_soc('46','Assureur');" value="+" name="add"/>
                      </td>
                       <td>
                        </td>
                  </tr>
  </div>
</td>
</tr>