Discussion :

[clem.76]

Bonjour,

Je débute en J2EE et JavaScipt.

J'ai un programme dans lequel j'aimerai créer une liste déroulante qui récupère des valeurs dans ma table. (Ca je l'ai et sa fonctionne)
Et un champ texte dans lequel les valeurs doivent se mettre automatiquement en fonction de l'entrée choisie dans la liste déroulante.

Pas de problèmes pour la liste déroulante qui fonctionne.
Impossible de faire la liaison entre la valeur selectionné de la liste déroulante et la valeur a mettre dans le champ texte.

Les 2 champs a afficher sont dans la même table, TYPPOST et CODPOST.

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>
<%@ taglib uri="/WEB-INF/navi.tld" prefix="sofNavi" %>
<%@ include file="/template/masqueRef.jsp" %>
 
 
<script language="Javascript">
//gestion de la touche entrer
ns4=(document.layers)? true:false;
ie4=(document.all)? true:false;
 
function key_pressed(e) {
    var ie = navigator.appName.indexOf("Microsoft") != -1;
    var myEvent = ie ? event : e;
    if (myEvent.keyCode == 119) { // Touche F8;
         annuler();
    }
    if (myEvent.keyCode == 13){ // Touche Entrée;
         valider();
    }
}
document.onkeydown = key_pressed;
 
function valider(){
	if (validateCodeIpnForm(document.codeIpnForm)){
		document.codeIpnForm.action="updatCipn.do";
		document.codeIpnForm.submit();
	}
}
function supprimer(){
	if (validateCodeIpnForm(document.codeIpnForm)){
		document.codeIpnForm.action="deletCipn.do";
		document.codeIpnForm.submit();
	}
}
function annuler(){
	//history.back();
	document.codeIpnForm.action="saisieCipn.do";
	document.codeIpnForm.submit();
}
 
 
</script>
 
<tiles:insert beanName="mainLayout" flush="true">	
	<tiles:put name="bandeauTitre" type="String" >
		<bean:message key="TitrePageMAJIpn" locale="local"/>
	</tiles:put>
		<tiles:put name="menuGauche" type="String">			
			<sofNavi:item fonction="FRETOUR" javascript="annuler()" />
			<sofNavi:itemVide/>
			<sofNavi:item fonction="FVALID" javascript="valider()" />
			<sofNavi:itemVide/>
			<sofNavi:itemVide/>
			<sofNavi:itemVide/>
			<sofNavi:item fonction="FSUPPR" javascript="supprimer()" />
		</tiles:put>
		<tiles:put name="corps" type="String">
			<nested:form  action="/updatCipn.do" onsubmit="return validateCodeIpnForm(this);">
				<font class="sfkTitre1"><bean:message key="CodeIpnForm.modifier.TitreEcran" locale="local"/></font>
				<HR>
				<TABLE width="100%" cellspacing="2" cellpadding="3" border=0 >
					<TR>
						<TD align="left" width="89"><font class="Lib1"><bean:message key="CodeIpnForm.strCodeIpn" locale="local"/></font></TD><TD width="3"><font class="Lib1">&nbsp;:&nbsp;</font></TD>
							<nested:define id="localCipn" property="codeIpn.codIpn" type="java.lang.String"/>
							<nested:hidden name="codeIpnForm" property="codeIpn.codIpn" />
						<TD align="left">
							<nested:text name="codeIpnForm" property="currentCipn" size="8" maxlength="8"  value="<%=localCipn%>" disabled="true"></nested:text>
						</TD>
					</TR>
					<TR>
						<TD align="left" width="89"><font class="Lib1"><bean:message key="CodeIpnForm.strCodUti" locale="local"/></font></TD><TD width="3"><font class="Lib1">&nbsp;:&nbsp;</font></TD>
						<TD align="left"><nested:text name="codeIpnForm" property="codeIpn.codUti" size="4" maxlength="4" ></nested:text></TD>
					</TR>
					<TR>
						<TD align="left" width="89"><font class="Lib1"><bean:message key="CodeIpnForm.strCodPost" locale="local" /></font></TD><TD width="3"><font class="Lib1">&nbsp;:&nbsp;</font></TD>
						<TD align="left">
							<nested:select name="codeIpnForm" property="codeIpn.codPost" >
							<nested:optionsCollection name="codeIpnForm" property="lstCodePost"  label="codPost" value="codPost" />
							</nested:select>
						</TD>
					</TR>
					<TR>
						<TD align="left" width="89"><font class="Lib1"><bean:message key="CodeIpnForm.strTypPost" locale="local"/></font></TD><TD width="3"><font class="Lib1">&nbsp;:&nbsp;</font></TD>
						<TD align="left"><nested:text name="codeIpnForm" property="codeIpn.typPost" size="4" maxlength="4" ></nested:text></TD>
					</TR>
					<TR>
						<TD align="left" width="89"><font class="Lib1"><bean:message key="CodeIpnForm.strLongUti" locale="local"/></font></TD><TD width="3"><font class="Lib1">&nbsp;:&nbsp;</font></TD>
						<TD align="left"><nested:text name="codeIpnForm" property="codeIpn.longUti" size="40" maxlength="40" ></nested:text></TD>
					</TR>
				</TABLE>
				<HR>
		</nested:form>
		<html:javascript formName="codeIpnForm"/>
		<script language="Javascript">
			/* Positionnement du curseur sur le 2nd champ */
			document.forms[0].elements[2].focus();
		</script>
	</tiles:put>
</tiles:insert>

C'est le code de la JSP.

Je récupère bien les valeurs de la table dans le champ texte mais je ne peux pas les liés avec celui de la liste.

Si vous avez une solution ou, besoin d'autres infos je suis tout a vous.

Merci.

Clément.

[karement]

lorsqu'une action (choix d'un élément de la liste déroulante par exemple) sera effectué sur ton select, tu auras deux choix possibles:
1) tu utilises du javascript afin de mettre à jours ton champ textarea afin d'y mettre les bonnes valeurs
2) tu rappelles ton action struts afin de préparer ta vue en fonction de ton choix.

dans le premier cas, le soucis c'est d'enregistrer d'une façon ou d'une autre le contenu qu'il est possible d'ajouter dans ta textarea (variable javascript) champ input caché etc... puis de faire le lien entre l'évènement "selection d'un item de la liste" avec la mise à jour de la textarea à partir des bonnes données sauvegardées quelque part dans la page.
exemple (je n'ai pas testé il y a peut-être quelques erreurs):

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
<input type="hidden" name="val1" id="val1" value="toto"/>
<input type="hidden" name="val2" id="val2" value="titi"/>
<input type="hidden" name="val3" id="val3" value="tata"/>
 
<select name="sel" id="sel" onChange="majData(this.value)">
<option value="1">choix1</option>
<option value="2">choix2</option>
<option value="3">choix3</option>
</select>
 
<textarea id="textarea1"></textarea>
 
<script type="text/javascript">
function majData(choix){
document.getElementById('textarea1').value = document.getElementById('val'+choix);
}
</script>

dans le second cas, c'est plus lourd pour l'utilisateur puisque celui-ci voit sa page se recharger une nouvelle fois. cependant il t'est facile d'afficher une nouvelle fois ta page avec les bonnes valeur et ta textarea remplie.

a toi de choisir. Personnellement j'utiliserais une troisième solution:
Propose un formulaire en plusieurs étapes.
étape1 l'utilisateur fait son choix dans la liste puis clic sur "continuer"
étape 2 l'utilisateur vois une nouvelle page avec la sélection faite précédemment et une textarea/tableau qui affiche les données voulues.
étape3 etc...

[clem.76]

Merci de ta réponse.

Je vais tester Lundi prochain (je suis en vacances 1 semaine ) le script que tu m'a donné voir si je peux en faire quelque chose.

Le rechargement serait une autre solution, j'essayerai si je ne m'en sort pas avec le javascript.

La 3eme solution n'est pas possible car je bosse sur un cahier des charges bien défini et je ne peux pas créer des actions supplémentaires a faire par l'utilisateur.

Merci.

Clément

[andry.aime]

Bonjour,

le soucis c'est d'enregistrer d'une façon ou d'une autre le contenu qu'il est possible d'ajouter dans ta textarea (variable javascript) champ input caché etc... puis de faire le lien entre l'évènement "selection d'un item de la liste" avec la mise à jour de la textarea à partir des bonnes données sauvegardées quelque part dans la page.

On peut utiliser AJAX pour chercher la contenue à mettre dans le textarea au serveur sans recharger la page .

A+.