Manipulation DOM suite à un évènement
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:
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. :D
Question subsidiaire : je souhaiterais que ce code soit portable (IE, Firefox, Opera, ...) qu'elles sont les choses à faire attentions?
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
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);
}); |
