Jsp dans du Javascript(page dynamique)

**sipatsymasaka** · 09/12/2011, 07h30

Salut!
Ma page doit être impérativement dynamique; quand je clique sur un bouton "rajouter", il m'appelle la fonction suivante, et ça marche, c'est complique mais ca marche, la fonction recueill1fo(this) aussi marche très bien, je commence a dominer ce dynamisme.

Mais mon problème c'est que je devrait charger les <option> a partir d'une base de donees, donc il me faut une boucle en jsp, alors comment devrai-je insérer cette boucle dans mon javascript ou comment modifier mon code pour arriver a mon but?
(juste un petit plus:comment devenir membre et pas "invite de passage"

, j'y vais tout le temps moi

)

voici mon code:

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
 
function newMED()
{    
          var target 		= document.getElementById('Account_1');
          var newdiv 		= document.createElement('div');
          var newdivname	= 'Div' + counter;
          newdiv.setAttribute('id',newdivname);
 
          var i= document.getElementById('stok').value; 
          i=parseInt(i);
          document.getElementById('stok').value=i+1;
          content = newdiv.innerHTML;
          content += "<table cellpadding=\"6\" cellspacing=\"10\" border=\"2\" width=\"1000\"><tr><td>"
          content +="N*"+i+"<br><br>        NC:";
          content +='<select type="text" name="NC['+i+']" id="NC['+i+']" onChange="recueill1fo(this);">';
          content+='<option selected>Faites un choix<//option>';
          content +='<option value="USD">USD<//option>';
          content +='<option value="EUR">EUR<//option>';
          content +='<option value="GBP">GBP<//option>';
          content +='<option value="JPY">JPY<//option>';
          content +='<option value="HKD">HKD<//option>';
          content +='<option value="CHF">tokny alaina avy any @base<//option>';
          content +='</select>';
          content+="<br><input type='button' value='ok' id='"+i+"' onclick='recueill1fo(this);' >";
          content +="</td><td><table><tr><td>       Forme:";
          content +="</td><td><input type='text' name='Forme["+i+"]' id='Forme["+i+"]' size='20'>";
          content +="</td></tr><tr><td>       Presentation:";
          content +="</td><td><input type='text' name='Pres["+i+"]' id='Pres["+i+"]' size='20'>";
          content +="</td></tr><tr><td>Mode de prise:";
          content +="</td><td><input type='text' name='Mode["+i+"]' id='Mode["+i+"]' size='20'>";
          content +="</td></tr><tr><td>Posologie(x g/y kg/y jr):";
          content +="</td><td><input type='text'  maxlength='4' size='1' name='Masse["+i+"]' id='Masse["+i+"]' size='3'>";
          content +="<input type='text'  maxlength='3' size='1' name='MasseU["+i+"]' id='MasseU["+i+"]' size='3'>";//Select
          content +="<input type='text'  maxlength='3' size='1' name='poi["+i+"]' id='poi["+i+"]' size='3'>";
          content +="<input type='text'  maxlength='3' size='1' name='poiU["+i+"]' id='poiU["+i+"]' size='3'>";//Select
          content +="<input type='text'  maxlength='4' size='1' name='par["+i+"]' id='par["+i+"]' size='3'>";
          content +="<input type='text'  maxlength='3' size='1' name='parU["+i+"]' id='parU["+i+"]' size='3'>";//Select
          content +="</td></tr><tr><td>Pendant:";
          content +="</td><td><input type='text'  maxlength='3' size='1' name=Pdt["+i+"]' id='Pdt["+i+"]' size='3'>";
          content +="<input type='text'  maxlength='4' size='1' name=PdtU["+i+"]' id='PdtU["+i+"]' size='3'>";//Select
          content +="</td></tr></table></td><td>Quantite a delivrer:";
          content +="<input type='text' name='Quant["+i+"]' id='Quant["+i+"]' size='20'>";
          content +="</td></tr></table>"
          //content +='<a id="AccountDelete" href="#" onclick="removeInput(\'' + newdivname + '\');">[Delete]</a>';
          newdiv.innerHTML = content;
          target.appendChild(newdiv);
          counter++;
}

**sipatsymasaka** · 09/12/2011, 08h03

je sais que: http://translate.googleusercontent.c...ylMJgRiRk9g#a1
mais l’élément est créé par un onclick alors je bloque total!
Merci de vos aides et critiques et conseils

**sipatsymasaka** · 09/12/2011, 08h18

sachez que dans ma page, toutes les <select> créés dynamiquement devront avoir les même <option> tirées de la base de données.

**sipatsymasaka** · 09/12/2011, 09h06

soyez compréhensif vous qui êtes avancés mais je crois qu'on est tous passé par un état: débutant.
moi, je le suis encore, je poste ici pour être aider et pour m'aider et pour aider, normal si je trouve moi-même la réponse avant les vôtres.

Ma solution:
a chaque création dynamique d'un <select> , je copie les <option> d'un <select id="listeMED" style="visibility:hidden;> chargé en jsp, avec cette fonction:

Code :

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

1
2
3
4
5
function cp(obj){ 
var select1 = document.getElementById("listeMED");  
var select2 = obj; 
select2.innerHTML = select2.innerHTML+select1.innerHTML;  
}

mais comment faire car on ne peut écrire <select onload="cp();">
Merci!

**sipatsymasaka** · 09/12/2011, 10h13

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
function newMED()
{    
          var target 		= document.getElementById('Account_1');
          var newdiv 		= document.createElement('div');
          var newdivname	= 'Div' + counter;
          newdiv.setAttribute('id',newdivname);
 
          var i= document.getElementById('stok').value; 
          i=parseInt(i);
          document.getElementById('stok').value=i+1;
          content = newdiv.innerHTML;
          content += "<table cellpadding=\"6\" cellspacing=\"10\" border=\"2\" width=\"1000\"><tr><td>"
          content +="N*"+i+"<br><br>        NC:";
          content +='<select type="text" name="NC['+i+']" id="NC['+i+']" onChange="recueill1fo(this);">';
          content+='<option selected>Faites un choix<//option>';
          content +='</select>';
          content+="<br><input type='button' value='ok' id='"+i+"' onclick='recueill1fo(this);' >";
          content +="</td><td><table><tr><td>       Forme:";
          content +="</td><td><input type='text' name='Forme["+i+"]' id='Forme["+i+"]' size='20'>";
          content +="</td></tr><tr><td>       Presentation:";
          content +="</td><td><input type='text' name='Pres["+i+"]' id='Pres["+i+"]' size='20'>";
          content +="</td></tr><tr><td>Mode de prise:";
          content +="</td><td><input type='text' name='Mode["+i+"]' id='Mode["+i+"]' size='20'>";
          content +="</td></tr><tr><td>Posologie(x g/y kg/y jr):";
          content +="</td><td><input type='text'  maxlength='4' size='1' name='Masse["+i+"]' id='Masse["+i+"]' size='3'>";
          content +="<input type='text'  maxlength='3' size='1' name='MasseU["+i+"]' id='MasseU["+i+"]' size='3'>";//Select
          content +="<input type='text'  maxlength='3' size='1' name='poi["+i+"]' id='poi["+i+"]' size='3'>";
          content +="<input type='text'  maxlength='3' size='1' name='poiU["+i+"]' id='poiU["+i+"]' size='3'>";//Select
          content +="<input type='text'  maxlength='4' size='1' name='par["+i+"]' id='par["+i+"]' size='3'>";
          content +="<input type='text'  maxlength='3' size='1' name='parU["+i+"]' id='parU["+i+"]' size='3'>";//Select
          content +="</td></tr><tr><td>Pendant:";
          content +="</td><td><input type='text'  maxlength='3' size='1' name=Pdt["+i+"]' id='Pdt["+i+"]' size='3'>";
          content +="<input type='text'  maxlength='4' size='1' name=PdtU["+i+"]' id='PdtU["+i+"]' size='3'>";//Select
          content +="</td></tr></table></td><td>Quantite a delivrer:";
          content +="<input type='text' name='Quant["+i+"]' id='Quant["+i+"]' size='20'>";
          content +="</td></tr></table>"
          //content +='<a id="AccountDelete" href="#" onclick="removeInput(\'' + newdivname + '\');">[Delete]</a>';
          newdiv.innerHTML = content;
          target.appendChild(newdiv);
          counter++;
          cp(document.getElementById('NC['+i+']')); //<-----------------ICI
}

mon autre problème c'est qu'a l'appelle de recueill1fo(obj), je dois encore tirer des éléments de la base de données, et, j'aurai donc encore vraiment besoin de détails sur vos réponses(XMLHttpRequest,...) car c'est pas possible du tout de le faire de la même manière que précédemment.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function recueill1fo(objid){
    // element
 
var elt = objid;
 
// id de l'element
 
var idElt = objid.getAttribute('id');
 
document.getElementById('Forme['+idElt+']').value = "oueeeeee";
//ca marche mais c'est pas complet car a la place "oueeeeee" je devrai avoir un enregistrement de ma bdd. plusieurs input sont a compléter par ces enregistrement. 
}

Merci.

**andry.aime** · 09/12/2011, 16h14

Bonsoir,

1- Select ne supporte pas innerHTML sur certain navigateurs et c'est pas propre de créer des éléments comme ça, utilise DOM. Fait une recherche sur le forum et la faq javascript et tu trouveras ton bonheur.
2- Si tu veux créer les mêmes éléments plusieurs fois, utilise cloneNode, ton code sera propre et optimisé. Un exemple.

Je ne comprend pas ce que tu veux faire en Ajax?

A+.

**sipatsymasaka** · 09/12/2011, 21h19

Merci pour tes remarques.
1) je doit créer de multiple éléments: <select> <input> ...
2)a chaque changement dans le <select>, je devais chercher des données mysql via cette option retenue et les afficher dans les autres <input>, c'est ce que je dois faire avec ajax, on me l'a conseillé d'ailleurs.
3)j'ai essayer avec cloneNode mais je galérais quand a la récupération des informations alors, avant de pouvoir améliorer, j'ai du faire avec ce qui marche.

**andry.aime** · 12/12/2011, 06h41

Bonjour,

Envoyé par sipatsymasaka

1) je doit créer de multiple éléments: <select> <input> ...
3)j'ai essayer avec cloneNode mais je galérais quand a la récupération des informations alors, avant de pouvoir améliorer, j'ai du faire avec ce qui marche.

Ouvre une nouvelle discussion sur le forum javascript pour que l'on puisse t'aider pour ça.

Envoyé par sipatsymasaka

2)a chaque changement dans le <select>, je devais chercher des données mysql via cette option retenue et les afficher dans les autres <input>, c'est ce que je dois faire avec ajax, on me l'a conseillé d'ailleurs.

pour remplir un input depuis la base, regarde cette discussion. Sinon, il y a un tutoriel que tu peux bien adapter pour ton besoin.

A+.

**sipatsymasaka** · 12/12/2011, 10h32

Merci.
Tout ça c’était juste une réponse a ta question.
Ok, je vais continuer sur le forum adéquat et piocher sur JSON, c'est la probable solution a mon actuel problème.
En passant, peux-tu me filer déjà des liens ou tuto?

Jsp dans du Javascript(page dynamique)

Servlets/JSP Java

Discussions similaires

Partager

Partager