Formulaire et filtre avec liste intermédaire

**domiq44** · 04/03/2016, 10h18

Bonjour,

Je débute avec Spring MVC.

Je dois créer une application, relativement simple, qui, en gros, consiste en un formulaire très grand pour insérer des données dans une table.

Une grande partie des données sont issues de différentes tables, seule leur ID nous intéresse (numérique ou chaine).

Il y aura donc des <form:input>, des <form:checkbox>, des <form:select>. et des boutons.

Tout ça, ça va. J'ai réussi à me débrouiller.

Par contre, ce qui m'ennuie ce sont des zones de ce genre (souhaité par le client) schématisé comme suit :
Ces zones seront utilisées afin de filtrer les données.

Nom : 2016-03-04_162802.jpg
Affichages : 1694
Taille : 4,1 Ko

Nom : 2016-03-04_162802.jpg
Affichages : 1694
Taille : 4,1 Ko

où il s'agit d'une aide à la saisie pour récupérer l'ID (champ qui ne sera pas affiché) dans ces tables en faisant la recherche par des champs "code" et "libellé" (et parfois aussi d'autres zones) (ce sont les [_____]) quant on appuie sur le bouton (les [Q])

Une remise à zéro de l'ID et des champs de saisie est possible en appuyant sur le bouton [X].

Si la requête ramène plus d'un résultat, une liste intermédiaire est affichée (tableau).
On sélectionne un enregistrement dans cette liste (table), puis on revient vers le formulaire avec les 2 zones remplies et l'ID valorisé.

Si la requête ramène un seul résultat, on revient vers le formulaire avec les 2 zones remplies et l'ID valorisé.

Si la requête ne ramène rien, on affiche un message.

Je ne vois pas comment je peux faire ça.
Je me doute qu'il y aura du Ajax (que je ne connais pas), mais je me sens perdu.

Quelqu'un a-t-il déjà fait quelque chose comme ça, ou s'approchant ?
Comment puis je y arriver ?

Merci d'avances.

Cdlt.

**andry.aime** · 04/03/2016, 11h26

Bonjour,

Tu cherches à faire des listes déroulantes liées et/ou des auto-complétions?
Si c'est le cas, regarde ces tutoriels:

http://www.mkyong.com/spring-mvc/spr...plete-example/

http://www.rockhoppertech.com/blog/s...-using-jquery/

A+.

**domiq44** · 04/03/2016, 13h22

Bonjour et merci pour ta réponse andry.aime.

Non ce n'est pas vraiment ce que je recherche.

Il s'agit plutôt d'un filtre composé de plusieurs zones de saisie qui serviront, l'un ou l'autre de critères de recherche, selon le bouton enfoncé.

Le résultat sera présenté sous forme de liste dans laquelle l'utilisateur pourra sélectionner la valeur qu'il souhaite.

En résumé (je prends un exemple) :

Les classes « Personne » (classe principale ou mère) et « Ville » (de naissance) sont liées.

La classe « Ville » un identifiant « codeInsee » ainsi que les propriétés « codePostal » et « nom ».

La classe « Personne » possède, entre autre, l'identifiant « numeroInsee » et une instance « ville » (matérialisée en base par la clé étrangère « codeInsee »).

On cherche a valoriser l'instance « personne.ville » en proposant un filtre sur « ville.codePostal » ou « ville.nom ».

Je ne sais pas si je suis vraiment clair sur mon besoin.

**andry.aime** · 04/03/2016, 15h03

Pour ton besoin, tu peux te baser sur le deuxième tutoriel, au lieu d'utiliser l'évenement change du select (dans le code JS), tu utilises le click du bouton pour faire la recherche.

**domiq44** · 04/03/2016, 15h12

Merci andry.aime, je vais regarder.

**domiq44** · 04/03/2016, 15h40

Si je comprends bien, dans le tuto, on remplit une 2ème combo à partir de la sélection d'une première combo.

Je ne comprends pas bien comment adapter ce tuto à mon besoin !

On lancerait une requête jQuery (ajax) après avoir saisi le critère de recherche dans la zone de saisie, puis après appui sur le bouton de recherche, mais pour remplir quoi avec le résultat sous forme de liste ?

Quel sont les règles d'usage pour la gestion des filtres comme celui dont je parle ?
Merci.

**andry.aime** · 08/03/2016, 10h53

Envoyé par domiq44

mais pour remplir quoi avec le résultat sous forme de liste ?

Envoyé par domiq44

Si la requête ramène plus d'un résultat, une liste intermédiaire est affichée (tableau).

Le tutoriel parle d'une liste mais tu peux l'adapter pour un tableau.

**domiq44** · 29/03/2016, 21h27

Bonsoir,

Finalement j'y suis arrivé avec ce tuto mais ce fut laborieux car c'est nouveau pour moi.

Je vais vous montrer ce que j'ai fait.

A noter que j'ai découvert l'existence des attributs "data-*" du HTML5 afin de véhiculer des données dans le code javascript, puisqu'il est impossible de récupérer les objets et ses attributs (ex: commune.codePostal ou commune.libelle) dans le javascript.

Pouvez-vous me donner :

vos critiques constructives
vos conseils
vos remarques
les changements que vous apporteriez pour simplifier le code

Surtout sur la partie AJAX que je trouve lourde, volumineuse et répétitive.
Je pense qu'il doit être possible de factoriser tout ça !

Bref ! Tout ce qu'il faut afin que j'industrialise cela ?
Merci d'avance.

Note: le nom du package "org.miage.sid" vient du fait que j'ai grapillé ci et là des cas de test.

L'entité "Commune" :

Code :

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

1
2
3
4
5
6
7
8
9
package org.miage.sid.entity;
 
public class Commune implements Serializable {
	private String codeInsee;
	private String codePostal;
	private String libelle;
 
	// Ctors, getters and setters
}

L'interface "CommuneDao" :

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
package org.miage.sid.dao;
 
import java.util.List;
 
import org.miage.sid.entity.Commune;
 
public interface CommuneDao {
	public void insert(Commune c);
	public void update(Commune c);
	public void delete(String codeInsee);
	public Commune findOne(String codeInsee);
	public List<Commune> findAll();
	public List<Commune> findByCodeInsee(String key);
	public List<Commune> findByCodePostal(String key);
	public List<Commune> findByLibelle(String key);
}

et son implémentation "CommuneDaoImpl" (il s'agit d'un mock) :

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
package org.miage.sid.dao.impl;
 
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.miage.sid.dao.CommuneDao;
import org.miage.sid.entity.Commune;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
 
public class CommuneDaoImpl implements CommuneDao {
 
	private Map<String, Commune> communes = new HashMap<String, Commune>();
	Logger logger = LoggerFactory.getLogger(CommuneDaoImpl.class);
 
	@Override
	public void insert(Commune c) {
		if (null != communes.get(c.getCodeInsee())) {
			throw new RuntimeException("La commune '" + c.getCodeInsee() + "' existe déjà.");
		}
		communes.put(c.getCodeInsee(), c);
	}
 
	@Override
	public void update(Commune c) {
		if (null == communes.get(c.getCodeInsee())) {
			throw new RuntimeException("La commune '" + c.getCodeInsee() + "' n'existe pas.");
		}
		communes.put(c.getCodeInsee(), c);
	}
 
	@Override
	public void delete(String codeInsee) {
		communes.remove(codeInsee);
	}
 
	@Override
	public Commune findOne(String codeInsee) {
		return communes.get(codeInsee);
	}
 
	@Override
	public List<Commune> findAll() {
		Collection<Commune> coms = communes.values();
		return new ArrayList<Commune>(coms);
	}
 
	@Override
	public List<Commune> findByCodeInsee(String key) {
		List<Commune> coms = new ArrayList<Commune>();
		for (Commune c : communes.values())
			if (c.getCodeInsee().indexOf(key) >= 0)
				coms.add(c);
		return coms;
	}
 
	@Override
	public List<Commune> findByCodePostal(String key) {
		List<Commune> coms = new ArrayList<Commune>();
		for (Commune c : communes.values())
			if (c.getCodePostal().indexOf(key) >= 0)
				coms.add(c);
		return coms;
	}
 
	@Override
	public List<Commune> findByLibelle(String key) {
		List<Commune> coms = new ArrayList<Commune>();
		for (Commune c : communes.values())
			if (c.getLibelle().indexOf(key) >= 0)
				coms.add(c);
		return coms;
	}
 
	public void init() {
		logger.info("Initialisation de la liste des communes");
		insert(new Commune("13200", "13000", "Marseille"));
		insert(new Commune("29019", "29200", "Brest"));
		insert(new Commune("31555", "31000", "Toulouse"));
		insert(new Commune("33063", "33000", "Bordeaux"));
		insert(new Commune("44109", "44000", "Nantes"));
		insert(new Commune("59350", "59000", "Lille"));
		insert(new Commune("67482", "67000", "Strasbourg"));
		insert(new Commune("75100", "75000", "Paris"));
		insert(new Commune("80001", "80100", "Abbeville"));
		insert(new Commune("90010", "90000", "Belfort"));
	}
}

L'interface service métier "CommuneService" :

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
package org.miage.sid.service;
 
import java.util.List;
 
import org.miage.sid.entity.Commune;
 
public interface CommuneService {
	public void insert(Commune c);
	public void update(Commune c);
	public void delete(String codeInsee);
	public Commune findOne(String codeInsee);
	public List<Commune> findAll();
	public List<Commune> findByCodeInsee(String key);
	public List<Commune> findByCodePostal(String key);
	public List<Commune> findByLibelle(String key);
}

et son implémentation "CommuneServiceImpl" :

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
package org.miage.sid.service.impl;
 
import java.util.List;
 
import org.miage.sid.dao.CommuneDao;
import org.miage.sid.entity.Commune;
import org.miage.sid.service.CommuneService;
 
public class CommuneServiceImpl implements CommuneService {
 
	private CommuneDao dao;
 
	public void setDao(CommuneDao dao) {
		this.dao = dao;
	}
 
	@Override
	public void insert(Commune c) {
		dao.insert(c);
	}
 
	@Override
	public void update(Commune c) {
		dao.update(c);
	}
 
	@Override
	public void delete(String codeInsee) {
		dao.delete(codeInsee);
	}
 
	@Override
	public Commune findOne(String codeInsee) {
		return dao.findOne(codeInsee);
	}
 
	@Override
	public List<Commune> findAll() {
		return dao.findAll();
	}
 
	@Override
	public List<Commune> findByCodeInsee(String key) {
		return dao.findByCodeInsee(key);
	}
 
	@Override
	public List<Commune> findByCodePostal(String key) {
		return dao.findByCodePostal(key);
	}
 
	@Override
	public List<Commune> findByLibelle(String key) {
		return dao.findByLibelle(key);
	}
}

Le controlleur "CommuneController" :

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
package org.miage.sid.controller;
 
import java.util.List;
 
import javax.validation.Valid;
 
import org.miage.sid.entity.Commune;
import org.miage.sid.service.CommuneService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
 
@Controller
public class CommuneController {
 
	@Autowired
	private CommuneService metier;
 
	@ModelAttribute(value = "communes")
	public List<Commune> getCommuneList() {
		return metier.findAll();
	}
 
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public ModelAndView index(ModelMap model) {
		model.put("commune", new Commune());
		return new ModelAndView("formCommunes", model);
	}
 
	@RequestMapping(value = "/saveCommune", method = RequestMethod.POST)
	public ModelAndView save(@Valid Commune c, BindingResult bindingResult, ModelMap model) {
		if (bindingResult.hasErrors()) {
			return new ModelAndView("formCommunes");
		}
		metier.insert(c);
		model.put("commune", new Commune());
		return new ModelAndView("formCommunes", model);
	}
 
	@RequestMapping(value = "/editCommune", method = RequestMethod.GET)
	public ModelAndView edit(@RequestParam String codeInsee, ModelMap model) {
		model.put("commune", metier.findOne(codeInsee));
		return new ModelAndView("formCommunes", model);
	}
 
	@RequestMapping(value = "/deleteCommune", method = RequestMethod.GET)
	public ModelAndView delete(@RequestParam String codeInsee, ModelMap model) {
		metier.delete(codeInsee);
		model.put("commune", new Commune());
		return new ModelAndView("formCommunes", model);
	}
 
	@RequestMapping(value = "/codeInsee/{value}", method = RequestMethod.GET)
	public ModelAndView getCommuneByCodeInsee(@PathVariable("value") String key, ModelMap model) {
		model.put("communeList", metier.findByCodeInsee(key));
		return new ModelAndView("f_comboCommune", model);
	}
 
	@RequestMapping(value = "/codePostal/{value}", method = RequestMethod.GET)
	public ModelAndView getCommuneByCodePostal(@PathVariable("value") String key, ModelMap model) {
		model.put("communeList", metier.findByCodePostal(key));
		return new ModelAndView("f_comboCommune", model);
	}
 
	@RequestMapping(value = "/libelle/{value}", method = RequestMethod.GET)
	public ModelAndView getCommuneByLibelle(@PathVariable("value") String key, ModelMap model) {
		model.put("communeList", metier.findByLibelle(key));
		return new ModelAndView("f_comboCommune", model);
	}
}

(seules les 3 dernières méthodes son vraiment utiles)

Le descripteur de déploiement "web.xml" :

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
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 
	<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath*:applicationContext.xml</param-value>
	</context-param>
 
	<!-- Creates the Spring Container shared by all Servlets and Filters -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
 
	<!-- Processes application requests -->
	<servlet>
		<servlet-name>appServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
 
	<servlet-mapping>
		<servlet-name>appServlet</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>
 
	<jsp-config>
		<jsp-property-group>
			<url-pattern>*.jsp</url-pattern>
			<el-ignored>false</el-ignored>
			<include-prelude>/WEB-INF/views/common/include.jsp</include-prelude>
		</jsp-property-group>
	</jsp-config>
 
</web-app>

Le context XML Spring "servlet-context.xml" :

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
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
 
	<!-- DispatcherServlet Context: defines this servlet's request-processing 
		infrastructure -->
 
	<!-- Enables the Spring MVC @Controller programming model -->
	<annotation-driven />
 
	<!-- Handles HTTP GET requests for /resources/** by efficiently serving 
		up static resources in the ${webappRoot}/resources directory -->
	<resources mapping="/resources/**" location="/resources/" />
	<resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/" />
 
	<!-- Resolves views selected for rendering by @Controllers to .jsp resources 
		in the /WEB-INF/views directory -->
	<beans:bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
	</beans:bean>
 
	<context:component-scan base-package="org.miage.sid" />
 
	<beans:bean
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
		id="multipartResolver">
		<beans:property name="maxUploadSize" value="100000"></beans:property>
	</beans:bean>
 
</beans:beans>

Les JSP :

"header.jsp" :

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
<!-- Defines all URLs for components -->
 
<spring:url value="/webjars/jquery/2.1.1/jquery.min.js" var="jQueryJs" />
 
<spring:url value="/webjars/bootstrap/3.2.0/css/bootstrap.min.css" var="bootstrapMinCss" />
<spring:url value="/webjars/bootstrap/3.2.0/js/bootstrap.min.js" var="bootstrapMinJs" />
 
<spring:url value="/webjars/font-awesome/4.1.0/css/font-awesome.min.css" var="fontAwesomeMinCss" />
 
<spring:url value="/resources/css/commune.css" var="communeCss" />
<spring:url value="/resources/js/commune.js" var="communeJs" />
 
<!-- Permet au CSS de déterminer la résolution de l'écran en fonction du périphérique -->
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel="stylesheet" type="text/css" href="${bootstrapMinCss}" />
<link rel="stylesheet" type="text/css" href="${fontAwesomeMinCss}" />
<link rel="stylesheet" type="text/css" href="${communeCss}" />
 
<script type="text/javascript" src="${jQueryJs}"></script>
<script type="text/javascript" src="${bootstrapMinJs}"></script>
<script type="text/javascript" src="${communeJs}"></script>

"include.jsp" :

Code :

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

1
2
3
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

"formCommune.jsp" :

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
<!DOCTYPE html>
<html>
<head>
<title>Liste des communes</title>
<c:import url="/WEB-INF/views/common/header.jsp" charEncoding="UTF-8" />
</head>
<body>
	<header>
		<span>
			<h1>Header</h1>
		</span>
	</header>
 
	<div class="container">
 
		<!-- Ajout d'un espace vide -->
		<div class="row">
 
			<!-- occupe 10 colonnes sur 12 de la grille -->
			<div class="col-xs-10">
 
				<div id="formCommune">
					<form:form modelAttribute="commune" method="post"
						action="saveCommune">
 
						<!-- Row 1 -->
						<div class="form-group">
 
							<form:label class="control-label col-xs-2" path="codeInsee">
								Commune:
							</form:label>
							<div id="divCodeInsee" class="col-xs-3">
								<div class="input-group">
									<form:input id="codeInsee" class="form-control" path="codeInsee" maxlength="5" size="5" title="Max 5 characters" />
									<span class="input-group-btn">
										<button class="btn btn-default" type="button" id="submitCodeInsee" data-href="${pageContext.request.contextPath}/codeInsee/">
											<i class="fa fa-search"></i>
										</button>
									</span>
								</div>
							</div>
							<div id="divCodePostal" class="col-xs-3">
								<div class="input-group">
									<form:input id="codePostal" class="form-control" path="codePostal" maxlength="5" size="5" title="Max 5 characters" />
									<span class="input-group-btn">
										<form:button class="btn btn-default" type="button" id="submitCodePostal" data-href="${pageContext.request.contextPath}/codePostal/">
											<i class="fa fa-search"></i>
										</form:button>
									</span>
								</div>
							</div>
							<div id="divLibelle" class="col-xs-4">
								<div class="input-group">
									<form:input id="libelle" class="form-control" path="libelle" maxlength="30" size="30" title="Max 30 characters" />
									<span class="input-group-btn">
										<form:button class="btn btn-default" type="button" id="submitLibelle" data-href="${pageContext.request.contextPath}/libelle/">
											<i class="fa fa-search"></i>
										</form:button>
										<form:button class="btn btn-default" type="button" id="resetCommune1">
											<i class="fa fa-times"></i>
										</form:button>
									</span>
								</div>
							</div>
							<div id="divCommune" class="col-xs-10" style="display: none;">
								<div class="input-group">
									<div id="selectCommune"></div>
									<span class="input-group-btn">
										<form:button class="btn btn-default" type="button" id="resetCommune2">
											<i class="fa fa-times"></i>
										</form:button>
									</span>
								</div>
							</div>
						</div>
					</form:form>
				</div>
			</div>
		</div>
	</div>
 
	<footer>
		<hr />
		<p>Footer</p>
	</footer>
 
</body>
</html>

Le fragment "f_comboCommune.jsp" :

Code :

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

1
2
3
4
5
6
7
<select class="form-control" data-href="${pageContext.request.contextPath}/commune/">
	<option value="" label="PLease select ..."/>
	<c:forEach var="x" items="${communeList}">
		<option value="${x.codeInsee}" label="${x.codeInsee} - ${x.codePostal} - ${x.libelle}" data-code-postal="${x.codePostal}" data-libelle="${x.libelle}">
		</option>
	</c:forEach>
</select>

Le CSS "commune.css" :

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
.table1 th {
	padding: 10px;
	margin: 10px;
	border: 1px dotted gray;
	background: pink;
}
 
.table1 td {
	padding: 10px;
	margin: 10px;
	border: 1px dotted gray;
	background: white;
}
 
.errors {
	color: red;
}

et le jQuery "commune.js" contenant la partie AJAX :

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
$(document).ready(function() {
 
	$('#submitCodeInsee').click(function() {
 
		var key = $('#codeInsee').val();
		var href = $(this).data('href');
 
		var myUrl = href + key;
 
		$.ajax({
			type: "GET",
			url: myUrl,
			success: function(data) {
				// on cache les masques de saisie
				$('#divCodeInsee').hide();
				$('#divCodePostal').hide();
				$('#divLibelle').hide();
 
				// on affiche le div contenant la liste
				$('#divCommune').show();
 
				// on valorise la liste
				$('#selectCommune').html($(data));
			},
			error: function (jqXHR, textStatus, errorThrown) {
				alert("An error occurred: " + jqXHR.statusCode().status + " - " + jqXHR.statusCode().statusText);
			}
		});
 
	});
 
	$('#submitCodePostal').click(function() {
 
		var key = $('#codePostal').val();
		var href = $(this).data('href');
 
		var myUrl = href + key;
 
		$.ajax({
			type: "GET",
			url: myUrl,
			success: function(data) {
				// on cache les masques de saisie
				$('#divCodeInsee').hide();
				$('#divCodePostal').hide();
				$('#divLibelle').hide();
 
				// on affiche le div contenant la liste
				$('#divCommune').show();
 
				// on valorise la liste
				$('#selectCommune').html($(data));
			},
			error: function (jqXHR, textStatus, errorThrown) {
				alert("An error occurred: " + jqXHR.statusCode().status + " - " + jqXHR.statusCode().statusText);
			}
		});
 
	});
 
	$('#submitLibelle').click(function() {
 
		var key = $('#libelle').val();
		var href = $(this).data('href');
 
		var myUrl = href + key;
 
		$.ajax({
			type: "GET",
			url: myUrl,
			success: function(data) {
				// on cache les masques de saisie
				$('#divCodeInsee').hide();
				$('#divCodePostal').hide();
				$('#divLibelle').hide();
 
				// on affiche le div contenant la liste
				$('#divCommune').show();
 
				// on valorise la liste
				$('#selectCommune').html($(data));
			},
			error: function (jqXHR, textStatus, errorThrown) {
				alert("An error occurred: " + jqXHR.statusCode().status + " - " + jqXHR.statusCode().statusText);
			}
		});
 
	});
 
	$('[id^="resetCommune"]').click(function() {
		// on affiche les masques de saisie
		$('#divCodeInsee').show();
		$('#divCodePostal').show();
		$('#divLibelle').show();
 
		// on vide les masques de saisie
		$('#codeInsee').val('');
		$('#codePostal').val('');
		$('#libelle').val('');
 
		// on vide la liste
		$('#selectCommune').html('');
 
		// on cache le div contenant la liste
		$('#divCommune').hide();
	});
 
	$('#selectCommune').on('change', 'select', function() {
 
		var href = $(this).data('href');
		var commune = $(this).find(':selected');
 
		// on affiche les masques de saisie
		$('#divCodeInsee').show();
		$('#divCodePostal').show();
		$('#divLibelle').show();
 
		var codeInsee = commune.val();
		var codePostal = commune.data('codePostal');
		var libelle = commune.data('libelle');
 
		// on remplit les masques de saisie
		$('#codeInsee').val(codeInsee);
		$('#codePostal').val(codePostal);
		$('#libelle').val(libelle);
 
		// on vide la liste
		$('#selectCommune').html('');
 
		// on cache le div contenant la liste
		$('#divCommune').hide();
	});
 
});

**domiq44** · 03/04/2016, 11h35

Personne n'a d'avis ?

Formulaire et filtre avec liste intermédaire

Spring Java

Discussions similaires

Partager

Partager