Discussion :

[Pandalex]

Bonjour à tous !

J'ai besoin de votre aide pour celle là.
L'idée de base est plutôt simple: j'ai deux listes déroulantes, les options disponibles dans la seconde dépendent du choix dans la première.

Je n'ai pas la main sur la modèle de base de donnée.

J'envoi deux listes de données via un request dispatcher dans mon fichier Java:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
[...]
    List<ConfigSousType> listConfigSousType =  new ArrayList();
    List<ConfigType> listConfigType =  new ArrayList();
[...]
    String querySousType = "SELECT distinct colonne, idValeur FROM ConfigSousType";
    String queryType = "SELECT * FROM ConfigType";
[...]
    request.setAttribute("listConfigSousType",listConfigSousType);
    request.setAttribute("listConfigType",listConfigType);
 
    String nextJSP = "/addConfigSousType.jsp";
    RequestDispatcher dispatcher = getServletContext().getRequestDispatcher(nextJSP)
[...]

Voici le modèle de données:

Première table "Type": nom, idType, valeur

Seconde table "SousType" : nom, idType, nomSousType, idSousType

Exemple:

Table Type
ColorCategory, 1, TheBlueColors
ColorCategory, 2, TheRedColors
FoodCategory, 1, TheTastyFood

Table SousType
ColorCategory, 1, DeepBlue, 1
ColorCategory, 1, LightBlue, 2
ColorCategory, 2, Crimson, 1
ColorCategory, 2, Scarlet, 2
FoodCategory, 1, Pizza

Je créé l'interface admin pour ajouter une ligne dans la seconde table.

Je veux que le première liste déroulante propose 'ColorCategory', 'FoodCategory'
Puis que sur la seconde, le choix soit filtrer selon la première.
Je choisis "ColorCategory" sur la première, la seconde propose "TheBlueColors", "TheRedColors"

Dans mon extrait de code, listConfigType contient toute la table (elle sera petite, moins de 100 lignes)
listConfigSousType contient un distinct : "ColorCategory , 1", "ColorCategory , 2", "FoodCategory, 1"

Dans mon JSP je le parcours comme ceci :

Code :

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

1
2
3
4
5
6
 
<select id ='name' required name='name'><br><br>
                    <c:forEach items="${listConfigSousType}" var="configSousType">
                        <option value="${configSousType.name}">${configSousType.name}</option>
                    </c:forEach>   
 </select>

=> J'ai deux problèmes:

- Sur la première liste déroulante, je vais me retrouver deux fois avec 'ColorCategory', il me faut un moyen de ne pas avoir de doublon.
- Et surtout comment suis-je sensé générer les options de la seconde liste déroulante ?
Je dois sûrement faire quelque chose dans un bout de Javascript sur un OnChange mais je ne vois pas comment l'articuler et je suis coincé.


En complément, pour afficher le libellé par rapport au idType dans ma page d'affichage je procède ainsi :

Code :

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

1
2
3
4
5
6
7
8
 
    <label for='value'>Valeur </label>              
    <input id ='value' type='text' name='value' 
    <c:forEach items="${listConfigType}" var="configType">
        <c:if test="${configType.name == configSousType.name && configType.idType == configSousType.idType}">
            value="${configType.value}"><br><br>
        </c:if>
    </c:forEach>

Merci à vous si vous êtes arrivés jusqu'ici, j'espère que vous pourrez me décoincer

[Pandalex]

J'ai avancé sur le sujet grâce à ce lien:

https://stackoverflow.com/questions/...vlets-and-ajax

J'ai ce Java

Code Java :

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
import com.google.gson.Gson;
 
public class optionsSousType extends HttpServlet{ 
 
 
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
		 Map<String, String> options = new LinkedHashMap<>();
		options.put("value1", "label1");
		options.put("value2", "label2");
		options.put("value3", "label3");
		String json = new Gson().toJson(options);
 
		response.setContentType("application/json");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().write(json);
	}
}

et ce 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
<%@ page language="java" import="java.util.*"%>
<%@ page contentType="text/html;  charset=ISO-8859-1"  pageEncoding="UTF-8"%>
 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>	
	<link rel='stylesheet' type='text/css' href='../Formulaire.css'>
	<meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=no'>
	<title>Thanact - Gestion de l'activité Thanatologique</title>
 
 
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
        $(document).on("click", "#somebutton", function() {               // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
                $.get("optionsSousType", function(responseJson) {                 // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
                        var $select = $("#libelle");                           // Locate HTML DOM element with ID "someselect".
                        $select.find("option").remove();                          // Find all child elements with tag name "option" and remove them (just to prevent duplicate options when button is pressed again).
                        $.each(responseJson, function(key, value) {               // Iterate over the JSON object.
                                $("<option>").val(key).text(value).appendTo($select); // Create HTML <option> element, set its value with currently iterated key and its text content with currently iterated item and finally append it to the <select>.
                        });
                });
        });
        </script>	
</head>
 
<body>
 
	<br/>
	<div id='exForm'>
		<form name="configform" method="post" action="../addConfigType">		
			<fieldset><legend>Ajout d'une configuration de sous colonne</legend>			
				<label for='colonne'>Type de colonne</label>
				<select id ='colonne' required name='colonne'><br><br>
					<c:forEach items="${listConfigType}" var="configType">
						<option value="${configType.colonne}">${configType.colonne}</option>
					</c:forEach>	
				</select>		
 
				<label for='libelle'>Type de sous colonne</label>
				<select id ='libelle' required name='libelle'> <option>Please select parent</option> </select><br><br>
 
				<button id="somebutton">press here</button>
 
				<label for='libValeur'>Valeur</label><input id ='libValeur' type='text' required name='libValeur'><br><br>				
				<input type='submit' class="buttonBlue" value="Ajouter" name="Submit">
			</fieldset>			
		</form>
	</div>
</body>
</html>

Quand je clique sur le bouton j'obtiens une erreur qui indique :

jquery-latest.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for '3282' in

C'est parce qu'il ne comprend pas que j'envoi un JSON.

J'ai donc corrigé par $.getJSON("optionsSousType".

Problème suivant, il ne se passait juste rien.
Après enquête il ne trouvait pas le java correspondant et j'ai donc modifié comme ceci :

Code JavaScript :

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

$.getJSON("${pageContext.request.contextPath}/optionsSousType", function(responseJson) {

Dans l'idée je vais maintenant enrichir mon fichier Java pour recevoir la valeur de la première dropdown et aller chercher en base les valeurs correspondantes.

J'espère que ça servira à quelqu'un