Actualiser zone de saisie sans rechargement page

**FooBayo** · 22/11/2017, 09h22

Bonjour à tous,

J'espère être dans le bon forum sinon merci de m'orienter un peu.

Sur mon formulaire, j'ai une champ numéro de compte, nom titulaire et prénom titulaire.

Je voudrais que lorsqu'on finit de saisir le numéro de compte que le système aille rechercher dans la base de données si le compte existe ensuite m'afficher les nom et prénom du titulaire dans leurs champs respectifs sans recharger le formulaire.

Après plusieurs recherches sur le sujet il parait que je trouverais mon salut dans Ajax. Malheureusement pour moi je n'ai jamais fait Ajax.

J'ai alors essayé d'adapter plusieurs code à mon cas malheureusement rien ne marche jusque là. Je viens donc solliciter votre aide. Je dois rendre ma part du projet en fin de journée.

Ci dessous mes code.

ma page 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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" isELIgnored="false"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Details Collecte</title>
		<link rel="stylesheet" href="<c:url value="/resources/css/jquery-ui-1.12.1.css"/>" >
  	    <script src="<c:url value="/resources/js/jquery-1.12.4.js" />"></script>
  		<script src="<c:url value="/resources/js/jquery-ui-1.12.1.js" />"></script>
  		<script>
		  $( function() {
			  var listcompte = new Array(<c:forEach items="${listcompte}" var="c" varStatus="status">"${c.numeroCompte}"<c:if test="${not status.last}">,</c:if></c:forEach>);
		    $( "#numeroCompte" ).autocomplete({
		      source: listcompte
		    });
 
		    $("#numeroCompte").blur(function(event) {
		    	//console.log(event);
		    	var NumCpte = $("#numeroCompte").val();
		    	console.log(NumCpte);
		    	  $.ajax({
		    	            type: "POST",
		    	            url: "affichertitulairecompte",		    	 
		    	            dataType: "json",
		    	            data: $("#numeroCompte").val(),
		    	            success: function () {
		    	              $("#numeroCompte").val(response.value)
		    	            },
		    	            error: function (request, status, error) {
		    	              // Ce qu'il faut faire
		    	            }
		    	        });
		    	});
		  } );
		</script>
	</head>	
 
	<body>
		<form:form method="POST" action="affichertitulairecompte" modelAttribute="infoCollecte">
 
			<label for=idCollecte>Collecte</label>
			<select id="idCollecte" name="idCollecte">
				<c:forEach items="${listcollecte}" var="c">
					<option value="${c.idCollecte}"><c:out value="${c.libelleCollecte}"/></option>
				</c:forEach>
			</select><br/> 
 
			<label for="numeroCompte">N° de compte</label><input type="text" id="numeroCompte" name="numeroCompte"/><br/>
			<label for="nomParticulier">Nom</label><input type="text" id="nomParticulier" name="nomParticulier"/><br/>
			<label for="prenomParticulier">Prénom</label><input type="text" id="prenomParticulier" name="prenomParticulier"/><br/>
			<label for="numeroTelephoneParticulier">N° de téléphone</label><input type="text" id="numeroTelephoneParticulier" name="numeroTelephoneParticulier"/><br/>
			<label for="emailParticulier">adresse email</label><input type="text" id="emailParticulier" name="emailParticulier"/><br/>
 
			<label for="montantCollecte">Montant</label><form:input path="montantCollecte"/><br/>
 
			<input type="submit" value="Save"/>
 
		</form:form>
	</body>
</html>

le controleur qui affiche le titulaire du compte

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@RequestMapping(value="/affichertitulairecompte", method=RequestMethod.POST)
	public @ResponseBody ModelAndView AfficherTitulaireCompte(ModelAndView model, HttpServletRequest request, HttpServletResponse response) {
		Compte compte = compteService.getCompteByNumero(Long.parseLong(request.getParameter(CHAMP_NUMERO_COMPTE)));
 
		if(compte != null){
			model.addObject("compte", compte);
			model.setViewName("titulairecompte");
			return model;			
		}else{
			InfoCollecte infoCollecte = new InfoCollecte();
			model.addObject("infoCollecte", infoCollecte);
			model.setViewName("infocollecteform");
			return model;
		}

Je vous sera vraiment reconnaissant pour l'intérêt que vous porterez à ma préoccupation.

**mathieu** · 22/11/2017, 13h40

AJAX semble être ce dont vous avez besoin.

Pour faire fonctionner le code JavaScript "$.ajax({..." qui lance la requête, vous pouvez commencer par analyser la requête AJAX dans la console de développement, dans la partie réseau.
Par exemple, si vous utilisez Firefox, regardez là :
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

Actualiser zone de saisie sans rechargement page

AJAX

Vue hybride

Discussions similaires

Partager

Partager