Partage

Actualiser zone de saisie sans rechargement page

22 novembre 2017 à 9:24:29

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

<%@ 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

@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.

LCaba

22 novembre 2017 à 10:05:13

Salut,

"rien ne marche" c'est pas très précis.

Commence par vérifier la console d'erreur de ton navigateur. Si y a pas d'erreur, regarde dans l'onglet réseau pour vérifier que ta requête se fait bien (d'après ce que tu as codé, elle est censé être envoyé quand le champs de saisie perd le focus).

Quelques remarques sur ton code :

L'événement blur n'est pas le meilleur choix. L'idéal c'est du surveiller la saisie avec l'événément input, et si la saisie contient suffisament de caractères, tu fait ta requete ajax.
Quand tu écris data: $("#numeroCompte").val() la query string envoyée est (par exemple pour le numéro de compte 123456789) : '123456789'. Or j'imagine que c'est plutôt ça que tu veux : 'numeroCompte=123456789'. Dans ce cas, il faut écrire : data: $("#numeroCompte") qui va automatiquement créer une query string en fonction du nom de ton champs
Ligne 30, tu remplaces le contenu du champs numero de compte au lieu de remplir le champs nom/prénom
Ligne 30 toujours, la variable response n'existe pas. Il faut que tu écrive function(response) à la ligne 29 pour qu'elle soit définie et corresponde au données reçues.

-
Edité par LCaba 22 novembre 2017 à 10:13:52

Cabinet vétérinaire à Angers

foobayo

22 novembre 2017 à 15:10:26

LCaba a écrit:

Salut,

"rien ne marche" c'est pas très précis.

Commence par vérifier la console d'erreur de ton navigateur. Si y a pas d'erreur, regarde dans l'onglet réseau pour vérifier que ta requête se fait bien (d'après ce que tu as codé, elle est censé être envoyé quand le champs de saisie perd le focus).

Quelques remarques sur ton code :

L'événement blur n'est pas le meilleur choix. L'idéal c'est du surveiller la saisie avec l'événément input, et si la saisie contient suffisament de caractères, tu fait ta requete ajax.

Quand tu écris data: $("#numeroCompte").val() la query string envoyée est (par exemple pour le numéro de compte 123456789) : '123456789'. Or j'imagine que c'est plutôt ça que tu veux : 'numeroCompte=123456789'. Dans ce cas, il faut écrire : data: $("#numeroCompte") qui va automatiquement créer une query string en fonction du nom de ton champs

Ligne 30, tu remplaces le contenu du champs numero de compte au lieu de remplir le champs nom/prénom

Ligne 30 toujours, la variable response n'existe pas. Il faut que tu écrive function(response) à la ligne 29 pour qu'elle soit définie et corresponde au données reçues.

-
Edité par LCaba il y a environ 4 heures

Merci LCaba, j'ai suivi tes recommandations et customisé mon code qui déjà fournit de bien meilleurs résultats qu'auparavant.

Cependant il manque toujours des choses pour que cela fonctionne parfaitement.

Controller

/* AFFICHER LES INFORMATIONS D'UN TITULAIRE DE COMPTE */
	@RequestMapping(value="/affichertitulairecompte", method=RequestMethod.POST)
	public String AfficherTitulaireCompte(@ModelAttribute InfoCollecte infoCollecte, HttpServletRequest request) throws Exception{
		//Compte compte = compteService.getCompteByNumero(Long.parseLong(request.getParameter(CHAMP_NUMERO_COMPTE)));
		Compte compte = compteService.getCompteByNumero(Long.parseLong("7440000000000"));
		if(compte != null){
			JSONArray json = new JSONArray();
			JSONObject jsono = new JSONObject();
			jsono.put("numeroCompte", compte.getNumeroCompte());
			jsono.put("nomParticulier", compte.getParticulier().getNomParticulier());
			jsono.put("prenomParticulier", compte.getParticulier().getPrenomParticulier());
			jsono.put("numeroParticulier", compte.getParticulier().getNumeroParticulier());
			jsono.put("emailParticulier", compte.getParticulier().getEmailParticulier());
			json.put(jsono);
			System.out.println(json.toString());
			return "infocollecteform";
		}
		return null;
	}

jsp

<%@ 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() {
		    	
		    	  $.ajax({
	    	            type: "POST",
	    	            url: "affichertitulairecompte",
	    	            dataType: "json",
	    	            data: $("#numeroCompte"),
	    	            
	    	            success: function (data) {
	    	              alert(data);
	    	              $("#nomParticulier").val(data.value),
	    	              $("#prenomParticulier").val(data.value),
	    	              $("#numeroTelephoneParticulier").val(data.value),
	    	              $("#emailParticulier").val(data.value)
	    	            },
	    	            
	    	            error: function (data) {
	    	            	alert("Error");
	    	            }
	    	        });
		    	});
		  } );
		</script>			
	</head>	
	
	<body>
		<div id="zone_1">
			<form:form method="POST" action="affichertitulairecompte" modelAttribute="infoCollecte">
				
				<div id="debut">			
					<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/>
				</div>
				
				<div id="corps">				
					<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/>
				</div>
				
				<div id="zone_de_rechargement">	</div>
				
				<div id="pied">
					<label for="montantCollecte">Montant</label><form:input path="montantCollecte"/><br/>
				</div>
				
				<input type="submit" value="Save"/>
				
			</form:form>
		</div>
		
	</body>
</html>

message affiché dans la console de tomcat

[{"numeroCompte":7440000000000,"numeroParticulier":"97 97 97 97","emailParticulier":"******@monprojet.org","nomParticulier":"******","prenomParticulier":"******"}]

Alors que je constate bel et bien les informations dans l'objet json (message dans la console) je reçois le message d'erreur "error" dans une boite de dialogue.

Merci de bien vouloir m'aider à comprendre.

LCaba

22 novembre 2017 à 16:06:04

Ecrit plutot :

error: function(xhr, error) {
  alert(error);
}

Pour avoir des informations sur l'erreur.

Dans ta fonction success, tu ne fais pas le bon usage de ton objet data. Par exemple, pour nom particulier, il faut écrire :

$("#nomParticulier").val(data.nomParticulier),

-
Edité par LCaba 22 novembre 2017 à 16:06:32

Cabinet vétérinaire à Angers

foobayo

22 novembre 2017 à 17:55:10

LCaba a écrit:

Ecrit plutot :
error: function(xhr, error) {
  alert(error);
}
Pour avoir des informations sur l'erreur.

Dans ta fonction success, tu ne fais pas le bon usage de ton objet data. Par exemple, pour nom particulier, il faut écrire :
$("#nomParticulier").val(data.nomParticulier),
-
Edité par LCaba il y a environ 1 heure

La fonction error m'affiche une boite de dialogue avec le message "parsererror".

Par contre quand je change la valeur du dataType de "json" en "text", alert(data) affiche un document html (ma page courante).

-
Edité par foobayo 22 novembre 2017 à 17:56:50

LCaba

22 novembre 2017 à 22:40:03

Tout est dit

parsererrorindique que le contenu reçu ne peut pas être interprété comme du JSON

Et pour cause au lieu de recevoir du JSON tu reçois du HTML.

Il y a visiblement un problème avec ton URL affichertitulairecompte

Cabinet vétérinaire à Angers

foobayo

23 novembre 2017 à 9:04:08

LCaba a écrit:

Tout est dit

parsererrorindique que le contenu reçu ne peut pas être interprété comme du JSON

Et pour cause au lieu de recevoir du JSON tu reçois du HTML.

Il y a visiblement un problème avec ton URL affichertitulairecompte

Bonjour LCaba,

Je vous remercie pour l'assistance que vous me portez. Concernant la méthode affichertitulaire compte, effectivement elle retourne un String (voir code ci-dessous).

//AFFICHER LES INFORMATIONS D'UN TITULAIRE DE COMPTE 

	@RequestMapping(value="/affichertitulairecompte", method=RequestMethod.POST)

	public String AfficherTitulaireCompte(@ModelAttribute InfoCollecte infoCollecte, HttpServletRequest request) throws Exception{

		//Compte compte = compteService.getCompteByNumero(Long.parseLong(request.getParameter(CHAMP_NUMERO_COMPTE)));

		Compte compte = compteService.getCompteByNumero(Long.parseLong("7440000000002"));

		if(compte != null){

			JSONArray json = new JSONArray();

			JSONObject jsono = new JSONObject();

			jsono.put("numeroCompte", compte.getNumeroCompte());

			jsono.put("nomParticulier", compte.getParticulier().getNomParticulier());

			jsono.put("prenomParticulier", compte.getParticulier().getPrenomParticulier());

			jsono.put("numeroParticulier", compte.getParticulier().getNumeroParticulier());

			jsono.put("emailParticulier", compte.getParticulier().getEmailParticulier());

			json.put(jsono);

			System.out.println(json.toString());

			return "infocollecteform";

		}

		return null;

	}

Existe t-il un type JSON pour que je puisse changer le type de retour de la méthode? J'ai essayé de retourner JSONArray et j'ai eu un parsererror.

Merci à vous

LCaba

23 novembre 2017 à 11:00:56

coté serveur, je connais que le PHP, je peux pas t'aider. Tout ce que je peux te dire, c'est que le serveur doit renvoyer une réponse au format JSON et non au format HTML.

je te conseille de poster un novueau topic sur le forum Java

Cabinet vétérinaire à Angers

foobayo

23 novembre 2017 à 11:45:48

LCaba a écrit:

coté serveur, je connais que le PHP, je peux pas t'aider. Tout ce que je peux te dire, c'est que le serveur doit renvoyer une réponse au format JSON et non au format HTML.

je te conseille de poster un novueau topic sur le forum Java

Merci je vais poster sur un forum Java. Un grand merci à vous LCaba