J'ai avancé sur le sujet grâce à ce lien:
https://stackoverflow.com/questions/...vlets-and-ajax
J'ai ce Java
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
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 :
$.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
Partager