Mise à jour de champs d'un formulaire via une liste. [Résolu]

[henkala]

Bonjour,

L'intitulé du sujet résume en partie le problème qui m'embête et pour lequel vous pourrez peut être m'aider à résoudre.

Explications :

Je dispose donc d'une liste; En cliquant sur cette dernière je voudrai que les différents champs de mon formulaire se mettent à jour.

Pour cette partie pas de difficultés, mais les choses se corsent pour moi après. En effet je remplis ma liste de la façon suivante :

Code :

1
2
3
4
5
6
7
8
 
<div id="list"><select name="drop1" id="Select1" size="10"
	multiple="multiple"
	onchange="recupSelection(this, this.form.idtSel, this.form.descript)"}>
	<c:forEach var="intit" items="${intitules}">
		<option value="${intit.id}">${intit.descript}</option>
	</c:forEach>
</select></div>

Récupérer et mettre à jour les champs des 2 variables id et descript fonctionne avec la fonction javaScript "recupSelection" :

Code :

1
2
3
4
5
6
7
8
9
 
function recupSelection(src, dest, dest2) {
	var valeur = src.options[src.selectedIndex].text;
		if (valeur = '')
			return alert("pas de valeur sélectionnée");
 
		dest2.value = src.options[src.selectedIndex].text;
		dest.value = src.options[src.selectedIndex].value;
	}

Mais ce que je n'arrive pas à faire, c'est récupérer le reste des données; la liste ${intitules} est en fait une liste d'objet récupérée via le code java suivant :

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
 
public ArrayList<CEvtBean> getListeIntitules() throws SQLException {
		PreparedStatement stm = connexion.prepareStatement(
		"SELECT * FROM tc_evt ");
 
		ResultSet result = stm.executeQuery();
 
		ArrayList<CEvtBean> liste = new ArrayList<CEvtBean>();
 
		while(result.next()) {
			liste.add(new CEvtBean(
					result.getInt("cevt_idt"),
					result.getInt("cevt_gpfam"),
					result.getString("cevt_descript"),
					result.getString("cevt_lib_sal"),
					result.getString("cevt_lib_dhd"),
					result.getString("cevt_lib_dhf"),
					result.getString("cevt_lib_suc"),
					result.getString("cevt_lib_tiers"),
					result.getString("cevt_lib_mat"),
					result.getString("cevt_lib_val"),
					result.getString("cevt_lib_unite_val"),
					result.getString("cevt_lib_ddr"),
					result.getString("cevt_lib_ddr_sal"),
					result.getString("cevt_lib_dos")
			));	
		}
		return liste;
 
	}

Et là je me perds :p, j'ai essayé de modifier ma fonction recupSelection ajoutant ma liste en paramètre mais cela ne fonctionne toujours pas :

Code :

1
2
3
4
5
6
7
8
9
10
 
function recupSelection(src, dest, dest2, liste) {
		var valeur = src.options[src.selectedIndex].text;
		if (valeur = '')
			return;
 
		dest2.value = src.options[src.selectedIndex].text;
		dest.value = src.options[src.selectedIndex].value;
		ddrSal.value = liste.get(src.selectedIndex).getLibddrSal().toString();
	}

Je cherche encore mais n'arrive pas à me dépatouiller tout seul !
Si quelqu'un pouvait m'éclairer le chemin ou tout du moins m'orienter je lui en serai très reconnaissant !

[henkala]

Bon je n'y arrive toujours pas !

je me penche vers une autre solution en utilisant du php, mais je pense que je m'y prends mal :

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
 
<div id="list"><select name="drop1" id="Select1" size="10"
	multiple="multiple"
	onchange="recupSelection(this, this.form.idtSel, this.form.gpfam, this.form.descript)"}>
	<?php
	$tabLib = array();
	$tabLib['id'] = array();
	$tabLib['gpfam'] = array();
	$tabLib['descript'] = array();
	$tabLib['libsal'] = array();
	$tabLib['libdhd'] = array();
	$tabLib['libdhf'] = array();
	$tabLib['libsuc'] = array();
	$tabLib['libtiers'] = array();
	$tabLib['libmat'] = array();
	$tabLib['libval'] = array();
	$tabLib['libUval'] = array();
	$tabLib['libddr'] = array();
	$tabLib['libddrSal'] = array();
	$tabLib['libdos'] = array();
	?>
	<c:forEach var="intit" items="${intitules}">
		<option value="${intit.id}">${intit.descript}</option>
		<?php
			$tabLib['id'][] = ${intit.id};
			$tabLib['gpfam'][] = ${intit.gpfam};
			$tabLib['descript'][] = '${intit.descript}';
		?>
	</c:forEach>
</select>
</div>

cela me donne :

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
 
<div id="list"><select name="drop1" id="Select1" size="10"
	multiple="multiple"
	onchange="recupSelection(this, this.idtSel, this.gpfam, this.descript)"}>
	<?php
	$tabLib = array();
	$tabLib['id'] = array();
	$tabLib['gpfam'] = array();
	$tabLib['descript'] = array();
	$tabLib['libsal'] = array();
	$tabLib['libdhd'] = array();
	$tabLib['libdhf'] = array();
	$tabLib['libsuc'] = array();
	$tabLib['libtiers'] = array();
	$tabLib['libmat'] = array();
	$tabLib['libval'] = array();
	$tabLib['libUval'] = array();
	$tabLib['libddr'] = array();
	$tabLib['libddrSal'] = array();
	$tabLib['libdos'] = array();
	?>
 
		<option value="1">DescriptTest</option>
		<?php
			$tabLib['id'][] = 1;
			$tabLib['gpfam'][] = 1;
			$tabLib['descript'][] = 'DescriptTest';
		?>
 
		<option value="3">Descript</option>
		<?php
			$tabLib['id'][] = 3;
			$tabLib['gpfam'][] = 2;
			$tabLib['descript'][] = 'Descript';
		?>
 
 
</select>
</div>

J'en déduis que le tableau devrait être rempli.

Toutefois j'ai l'impression que les tableaux ne se créent quand même pas car je n'arrive pas à récupérer le tableau principal c'est à dire $tabLib.

Une fois que le tableau associatif sera créé je pense pouvoir le passer en paramètre de ma fonction JavaScript et y exploiter les résultats.

En espérant être clair dans l'explication de mon problème, si ce n'est pas le cas je reformulerai il n'y a pas de problèmes ^^ !

Merci d'avance.

[henkala]

Bon en fait le php ne fonctionne pas dans les jsp ^^ donc la pseudo solution que j'avais trouvé n'en est en fait pas une !

Ce que j'essaye de faire maintenant c'est de récupérer directement ma liste d'objets dans une fonction JavaScript en plaçant en paramètre ${intitules} mais je ne sais pas comment faire pour qu'il prenne bien en compte les objets et que je puisse traiter derrière avec un quelque chose dans le genre de ${intitules}.get(src.options[src.selectedIndex].value).

[henkala]

Bon je reprends le sujet !

J'ai trouvé une voie à suivre qui me permettra de récupérer mes champs et même de garder ma page sans la rafraichir entièrement.

Je vais donc utiliser Ajax et JQuery :

- Appel Ajax au serveur lors du choix dans la liste sur la page (JQuery).
- Lecture des données (JAVA).
- Envoi des données (JAVA) dans la réponse au format JSON.
- Récupération des données dans la réponse (JQuery).
- Insertion des données dans les champs (JQuery).

Si vous avez d'autres idées n'hésitez pas !

[henkala]

J'ai commencé à rédiger ma solution mais je rencontre des difficultés.
J'utilise struts donc dans le xeb.xml je renseigne où trouver la config struts-config.xml.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<servlet>
		<description>Struts action servlet</description>
		<display-name>actionStruts</display-name>
		<servlet-name>actionStruts</servlet-name>
		<servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
		<init-param>
			<description>Struts config file location</description>
			<param-name>config</param-name>
			<param-value>/WEB-INF/struts/struts-config.xml</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>actionStruts</servlet-name>
		<url-pattern>*.do</url-pattern>
	</servlet-mapping>

Ensuite dans le stuts-config.xml je renseigne les actions à effectuer :

Code :

1
2
3
4
5
6
 
<!-- Action Mappings -->
	<action-mappings>
		<!-- Home page -->
		<action path="/intituleConsult" parameter="action" type="action.IntituleAction" />
	</action-mappings>

Puis je créé ma classe qui va envoyer les données au format JSON :

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
 
package action;
 
import java.util.HashMap;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import net.sf.json.JSONObject;
 
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
 
public class IntituleAction extends Action{
 
	public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
		String descript = request.getParameter("descript"); // paramètre envoyé dans la requête AJAX
 
		// Normalement c'est ici qu'on accède à la base afin de remplir une HashMap qui contiendrait toutes les informations de l'intitule
 
		System.out.println("IntituleAction");
		// Nous remplissons en dur ici pour l'exemple
		HashMap hm = new HashMap();
		hm.put("test", "test");
		hm.put("libsal", "libsalTest");
		hm.put("libdhd", "libdhdTest");
		hm.put("libdhr", "libdhrTest");
 
		// chaque clé de notre map devient une clé dans l'objet JSON (utilisation de Json-lib)
		JSONObject json = JSONObject.fromObject(hm);
 
		// façon d'envoyer l'objet JSON pour que Prototype puisse le récupérer
		response.setHeader("X-JSON", json.toString());
 
		return null;
	}
}

Afin de traiter les données JSON je créé un fichier .js :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function majChps(src, path) {
	var url = path+"/intituleConsult.do";
	var id = src.options[src.selectedIndex].value;	
	new Ajax.Request(url, {
		parameters: {id: id},
		onSuccess: function(transport, json) {
			if (json.error) {
				alert(json.error);
			}
			else {
				$('test').innerHTML = "<input id='test' type='text' name='test' value='"+json.test+"' onblur='champRempli(this); />";
				$('libsal').innerHTML = "<input id='libsal' type='text' name='libsal' value='"+json.libsal+"' onblur='champRempli(this); />";
				$('libdhd').innerHTML = "<input id='libdhd' type='text' name='libdhd' value='"+json.libdhd+"' onblur='champRempli(this); />";
				$('libdhr').innerHTML =  "<input id='libdhr' type='text' name='libdhr' value='"+json.lidhr+"' onblur='champRempli(this); />";
			}
		}
	});
}

Et pour finir je fais appel à la fonction majChps sur le onChange de ma liste :

Code :

1
2
3
4
5
6
7
 
<div id="list"><select name="drop1" id="Select1" size="10"
			onchange="majChps(this, this.form.descript);">
			<c:forEach var="intit" items="${intitules}">
				<option value="${intit.id}">${intit.descript}</option>
			</c:forEach>
		</select></div>

J'ai mis des données test dans ma classe java, je ferai l'appel à la base quand le reste sera fonctionnel.

Voilà j'ai réussi à faire fonctionner cela sur un projet à part mais lorsque je le mets dans le projet final ça ne marche plus.

[henkala]

Bonjour bonjour,

Bon j'ai réussi à m'en sortir, je vous donne les sources qui fonctionnent pour ceux qui en auraient besoin.

Donc pour récapituler :

J'utilise :
- prototype 1.6.1
- json 2.3
- struts 1.2.9

Je veux mettre à jour les champs texte quand je clique sur une liste de ma page sans la rafraichir, pour ce faire je vais faire appel à une fontion sur le onchange() de la liste :

Code :

1
2
3
4
5
6
7
<div id="list"><select name="drop1" id="Select1" size="10"
			onchange="majChps(this, '${ctx}');">
			<c:forEach var="intit" items="${intitules}">
				<option value="${intit.id}">${intit.descript}</option>
			</c:forEach>
		</select></div>

Je rentre les paramètres dans majChps(this, '${ctx}') (this étant la form et ${ctx} le chemin absolu de la page obtenu via

Code :

<% request.setAttribute("ctx", request.getContextPath()); %>

)

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
function majChps(src, path) {
	var url = path+"/intituleConsult.do";
	var id = src.options[src.selectedIndex].value;	
	new Ajax.Request(url, {
		parameters: {id: id},
		onSuccess: function(transport, json) {
			if (json.error) {
				alert(json.error);
			}
			else {
				src.form.idt.value = json.idt;
				src.form.descript.value = json.descript;
				src.form.libsal.value = json.libsal;
				src.form.libdhd.value = json.libdhd;
				src.form.libdhf.value = json.libdhf;
				src.form.libsuc.value = json.libsuc;
				src.form.libtiers.value = json.libtiers;
				src.form.libmat.value = json.libmat;
				src.form.libval.value = json.libval;
				src.form.libUval.value = json.libUval;
				src.form.libddr.value = json.libddr;
				src.form.libddrsal.value = json.libddrsal;
				src.form.libdos.value = json.libdos;
				
			}
		}
	});
}

La requête Ajax a plusieurs paramètres, ici je renseigne donc l'url avec var url = path+"/intituleConsult.do"; (mettre à jour struts-config.xml et le web.xml) et l'id avec var id = src.options[src.selectedIndex].value; qui va pouvoir être utilisé comme paramètre dans ma classe JAVA.

Je mets à jour mon web.xml :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<servlet>
		<description>Struts action servlet</description>
		<display-name>actionStruts</display-name>
		<servlet-name>actionStruts</servlet-name>
		<servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
		<init-param>
			<description>Struts config file location</description>
			<param-name>config</param-name>
			<param-value>/WEB-INF/struts/struts-config.xml</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>actionStruts</servlet-name>
		<url-pattern>*.do</url-pattern>
	</servlet-mapping>

et par la même occasion le stuts-config.xml:

Code :

1
2
3
4
5
6
 
<!-- Action Mappings -->
	<action-mappings>
		<!-- Home page -->
		<action path="/intituleConsult" parameter="action" type="action.IntituleAction" />
	</action-mappings>

Puis je créé ma classe qui va envoyer les données au format JSON en les récupérant depuis ma base de données :

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
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
 
package controlleur.action;
 
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import model.bean.Administration.CEvtBean;
import net.sf.json.JSONObject;
 
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
 
import dao.SessionMySQL;
 
public class IntituleAction extends Action{
 
 
	public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception, SQLException {
		String id = request.getParameter("id"); // paramètre envoyé dans la requête AJAX
 
		// On accède à la base afin de remplir une HashMap qui contient toutes les informations de l'intitulé
		SessionMySQL cnx = new SessionMySQL("mysql_utilisateur");
		Connection connexion = cnx.getConnexion();
 
		PreparedStatement stm = connexion.prepareStatement(
		"SELECT * FROM tc_evt WHERE cevt_idt= ?");
 
		stm.setInt(1, Integer.parseInt(id));
 
		ResultSet result = stm.executeQuery();
 
		ArrayList<CEvtBean> liste = new ArrayList<CEvtBean>();
 
		while(result.next()) {
			liste.add(new CEvtBean(
					result.getInt("cevt_idt"),
					result.getInt("cevt_gpfam"),
					result.getString("cevt_descript"),
					result.getString("cevt_lib_sal"),
					result.getString("cevt_lib_dhd"),
					result.getString("cevt_lib_dhf"),
					result.getString("cevt_lib_suc"),
					result.getString("cevt_lib_tiers"),
					result.getString("cevt_lib_mat"),
					result.getString("cevt_lib_val"),
					result.getString("cevt_lib_unite_val"),
					result.getString("cevt_lib_ddr"),
					result.getString("cevt_lib_ddr_sal"),
					result.getString("cevt_lib_dos")
			));
		}
 
		// Nous remplissons la hashmap
		HashMap hm = new HashMap();
		hm.put("idt", liste.get(0).getId().toString());
		hm.put("descript", liste.get(0).getDescript().toString());
		hm.put("libsal", liste.get(0).getLibSal().toString());
		hm.put("libdhd", liste.get(0).getLibDhd().toString());
		hm.put("libdhf", liste.get(0).getLibDhf().toString());
		hm.put("libsuc", liste.get(0).getLibSuc().toString());
		hm.put("libtiers", liste.get(0).getLibTiers().toString());
		hm.put("libmat", liste.get(0).getLibMat().toString());
		hm.put("libval", liste.get(0).getLibVal().toString());
		hm.put("libUval", liste.get(0).getLibUVal().toString());
		hm.put("libddr", liste.get(0).getLibDdr().toString());
		hm.put("libddrsal", liste.get(0).getLibddrSal().toString());
		hm.put("libdos", liste.get(0).getLibDos().toString());
 
		// chaque clé de notre map devient une clé dans l'objet JSON (utilisation de Json-lib)
		JSONObject json = JSONObject.fromObject(hm);
 
		// façon d'envoyer l'objet JSON pour que Prototype puisse le récupérer
		response.setHeader("X-JSON", json.toString());
 
		return null;
	}
}

Donc ça fonctionne très bien pour les caractères normaux, après dès qu'il y a un accent ou une apostrophe dans les données traitées par prototype ce dernier déchante assez rapidement.
Pour remédier à ce problème une modification peut être faite dans prototype.js mais à vos risque et péril, il faut donc modifier toutes les fonctions "encodeURIComponent" par des "escape" et tout les "decodeURIcomponent" par des "unescape".
Cela fonctionne chez moi mais j'ai peur que ça ne me fasse des erreurs par la suite; à voir donc sur la durée...

Voilà, j'espère que ce sujet sera utile pour ceux qui sont dans le flou par rapport à ça. Merci de votre (mon?) aide. J'ai été un peu déçu qu'il n'y ai même pas une personne à répondre mais bon peut être était-ce trop compliqué ou simplement pas le bon moment !

Cordialement,

Henkala.