Liste déroulante dépendante d'une autre via Bean en JSP

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

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

J'ai ce Java

Code:

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:

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:

$.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 ;)