Discussion :

[Cookie Monster]

Bonsoir à tous, j'ai un petit problème avec du code javascript.
Petite explication, je réalise un formulaire pour des réservations d'un repas. Lorsque l'utilisateur change son nombre d'invités je modifie la suite du formulaire pour qu'il choisisse le menu pour chacun de ses invités (choix entre deux menus).
Jusque là pas de problème : je récupère très bien ce nombre avec jquery puis commence la manipulation du DOM.

Je crée un <div> à l'intérieur duquel je vais stocker des boutons radio.
J'initialise tous les nouvelles éléments dont je vais avoir besoin et je les insères en tant que fils de <div>.
Au final ce que j'aimerais obtenir, c'est:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div>
       <span>1er invité</span>
       <label>...</label>
       <input type="radio"/>
       ...
       <span>Dernier invité</span>
       <label>...</label>
       <input type="radio"/>
</div>

Problème, le script est extrêmement lent et ne fonctionne que pour l'ajout d'un invité. J'ai essayé de bouger la création des nouveaux éléments en-dehors de ma boucle "for" mais le résultat est le même. Donc je sèche sur la nature de l'erreur. Si quelqu'un à une petite idée pour me faire avancer, je lui en serais très reconnaissant.

Question subsidiaire : je souhaiterais que ce code soit portable (IE, Firefox, Opera, ...) qu'elles sont les choses à faire attentions?

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
//#Personne correspond à un <select> avec le nombre de d'invités
$("#Personne").change(function () {
 
		$("#Invites").remove();
 
		var nb_invites = parseInt($('#Personne :selected').val());
 
		var new_menu_selection_div = document.createElement("div");
		new_menu_selection_div.setAttribute("id", "Invites");
 
		var new_invite_span = document.createElement("span");
 
		var label_1_text = document.createTextNode("Menu 1");
		var label_2_text = document.createTextNode("Menu 2");
 
		var new_menu_selection_label_1 = document.createElement("label");
		var new_menu_selection_radio_1 = document.createElement("input");
		var new_menu_selection_label_2 = document.createElement("label");
		var new_menu_selection_radio_2 = document.createElement("input");
 
		//console.log(nb_invites);
 
		for( i=1; i<= nb_invites; i++ ){
 
			if(i=1)
				var span_text = document.createTextNode("Menu pour le 1er invit\351 :");
			else
				var span_text = document.createTextNode("Menu pour le " + i + "e invit\351 :");
 
			new_invite_span.appendChild(span_text);
			new_menu_selection_div.appendChild(new_invite_span);
 
			//var new_menu_selection_label_1 = document.createElement("label");
			new_menu_selection_label_1.setAttribute("for", "Invite" + i);
			new_menu_selection_label_1.appendChild(label_1_text);
			new_menu_selection_div.appendChild(new_menu_selection_label_1);
 
			//var new_menu_selection_radio_1 = document.createElement("input");
			new_menu_selection_radio_1.setAttribute("type", "radio") ;
			new_menu_selection_radio_1.setAttribute("name", "Invite" + i) ;
			new_menu_selection_radio_1.setAttribute("value", "Menu1") ;
			new_menu_selection_div.appendChild(new_menu_selection_radio_1);
 
			//var new_menu_selection_label_2 = document.createElement("label");
			new_menu_selection_label_2.setAttribute("for", "Invite" + i);
			new_menu_selection_label_2.appendChild(label_2_text);
			new_menu_selection_div.appendChild(new_menu_selection_label_2);
 
			//var new_menu_selection_radio_2 = document.createElement("input");
			new_menu_selection_radio_2.setAttribute("type", "radio") ;
			new_menu_selection_radio_2.setAttribute("name", "Invite" + i) ;
			new_menu_selection_radio_2.setAttribute("value", "Menu2") ;
			new_menu_selection_div.appendChild(new_menu_selection_radio_2);
		}
		$("#Personne").after(new_menu_selection_div);
	});

[le_chomeur]

Bonjour et bienvenue à toi

je ne vois pas d'erreur particulière au niveau du dom , du coté de jquery idem , pourquoi n'utilises tu pas également jquery pour créer tes éléments ?

[SpaceFrog]

name ne peut être attribué en runtime avec IE
UN peu de lecture sur le sujet et une petit lib
http://www.developpez.net/forums/d53...ynamique-form/

[le_chomeur]

upsss ce ***** de name j'l'oublis a chaque fois !

[Cookie Monster]

Ok merci pour le conseil sur "name".
Pour le fait de ne pas travailler avec jquery pour créer mes éléments c'est parce que je savais pas que c'était possible (je débute avec javascript et jquery)
Merci SpaceFrog pour le conseil et la lib mais bon je ne pense pas en avoir besoin pour l'instant mais je garde ca sous le coude si jamais je n'arrive pas à me dépatouiller de tout le reste


Bon un ami a résolu le problème : j'avais réinventé la boucle infinie

Code :

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

1
2
3
4
5
6
7
8
 
for(i=1;i<=2;i++)
{
   if (i=1)
      ....
   else
      ....
}

"i=1" est toujours vrai et remet à chaque fois la variable de boucle à 1 donc