JEE : form with jsp and angular
Question
I'm a new in angular and I'm doing a little banking project. I'm using JSP and angular 1.3.2. I have a little form for creating an account. On the form when I blur after typing the customer number, if the customer exists, it should show the rest of the attributes like name adresse etc. But in my case, everything is showing. And even when I print a string in the servlet just to test nothings is coming. In the angular controller also the "alert" is not showing anything. Now I want to understand what's not working. Could anybody help me fix this, please! Thanks in Advance. Here are codes. Jsp Page
var banking = angular.module('banking', []);
banking.controller('accountCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.getClient = function() {
$http({
method: 'GET',
url: 'account',
params: {
action: "getClient",
numClient: $scope.numClient
}
}).success(function(data, status, headers, config) {
alert(ok);
$scope.nameCli = data.nomComplet;
$scope.adresse = data.adresse;
$scope.email = data.email;
$scope.tel = data.telephone;
$scope.sexe = data.sexe;
$scope.datenaiss = data.dateNaissance;
});
};
alert("ok");
}
]);
<body ng-controller="accountCtrl">
<div class="row">
<div class="col-lg-10 col-md-9">
<!-- <div class="col-lg-1"><img src="img/ajout_contact.png" alt=""></div>-->
<h1 class="titre-contact">Creation d'un compte</h1>
</div>
</div>
<div class="container col-lg-10" style="border: 1px solid silver; border-radius: 1px 1px 1px 1px">
<div class="row">
<div class="col-sm-4">
<div class="tableaudebord">
<div class="contact_container">
<div class="row">
<div class="col-lg-8 col-lg-12 col-md-offset-1">
<!-- <h2>Ajouter un client</h2> -->
<div class="nb_com" style="display:none">9</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<form class="form-horizontal" role="form" data-toggle="validator">
<div class='row'>
<div class="col-lg-8 col-lg-12 col-md-offset-1">
<div class="titleprghp">
<span class="prg">Informations Client</span>
</div>
</div>
</div>
<div class='row'>
<div class="col-lg-4 col-lg-offset-1">
<!--<form class="form-horizontal" role="form">-->
<div class="form-group">
<label for="cin" class="col-sm-2 control-label">Numéro D'identité</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="cin" ng-model="numClient" ng-blur="getClient()">
</div>
</div>
<div class="form-group">
<label for="nom" class="col-sm-2 control-label">Nom :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nameCli" ng-model="nameCli">
</div>
</div>
<div class="form-group">
<label for="datenaiss" class="col-sm-2 control-label">Date Naissance</label>
<div class="col-sm-8" data-validate="date">
<input type="date" class="form-control" name="datenaiss" ng-model="datenaiss" id="datenaiss" required="" data-format="DD/MM/YYYY">
</div>
</div>
<div class="form-group">
<label for="sexe" class="col-sm-2 col-xs-12 control-label">Sexe</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" id="inlineCheckbox1" value="m" ng-model="sexe"> Masculin
</label>
<!-- <div class=" hidden-lg hidden-md col-xs-2"></div>-->
<label class="form-check-label">
<input class="form-check-input" type="radio" id="inlineCheckbox2" value="f" ng-model="sexe"> Feminin
</label>
</div>
</div>
<!-- </form>-->
</div>
<div class="col-lg-4 col-lg-offset-0">
<!--<form class="form-horizontal" role="form">-->
<div class="form-group">
<label for="adresse" class="col-sm-2 control-label">Adresse :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="adresse" ng-model="adresse">
</div>
</div>
<div class="form-group">
<label for="mail" class="col-sm-2 control-label">Email :</label>
<div class="col-sm-8" data-validate="email">
<input type="email" class="form-control" name="email" id="email" ng-model="email" data-error="Adresse email invalide" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="tel" class="col-sm-2 control-label">Téléphone :</label>
<div class="col-sm-8" data-validate="phone">
<input type="tel" class="form-control" name="tel" id="tel" ng-model="tel" data-error="Le numero de tel est invalide" pattern="^[0-9]{1,}" maxlength="9" placeholder="(+221)77-745-89-65" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class='row'>
<div class="col-lg-8 col-lg-12 col-md-offset-1">
<div class="titleprghp">
<span class="prg">Informations Compte</span>
</div>
</div>
</div>
<!--<div class="blochp_contact">-->
<div class='row'>
<div class="col-lg-4 col-lg-offset-1">
<!--<form class="form-horizontal" role="form">-->
<div class="form-group">
<label for="numcpt" class="col-sm-2 control-label">Num Compte :</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="numcpt" id="numcpt">
</div>
</div>
<div class="form-group">
<label for="nom2" class="col-sm-2 control-label">Nom Client :</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="nom2" id="nom2">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 col-xs-12 control-label">Type Compte</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" id="inlineCheckbox1" value="simple"> Simple
</label>
<!-- <div class=" hidden-lg hidden-md col-xs-2"></div>-->
<label class="form-check-label">
<input class="form-check-input" type="radio" id="inlineCheckbox2" value="xeweul"> Xeweul
</label>
</div>
</div>
</div>
<div class="col-lg-4 col-lg-offset-0">
<!--<form class="form-horizontal" role="form">-->
<div class="form-group">
<label for="dateouv" class="col-sm-2 control-label">Date Ouverture</label>
<div class="col-sm-8" data-validate="date">
<input type="date" class="form-control" name="dateouv" id="dateouv" required="" data-format="DD/MM/YYYY">
</div>
</div>
<div class="form-group">
<label for="solde" class="col-sm-2 control-label">Solde</label>
<div class="col-sm-8">
<input type="number" class="form-control" name="solde" id="solde">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-5 col-lg-12 col-md-offset-1">
<div class="boutton">
<div class="col-lg-7 col-md-7 hidden-md hidden-xs"></div>
<div class="col-lg-1 col-md-1 col-xs-12">
<button name="submit" id="cancel" type="reset" value="reset" class="btn btn-default">Cancel<span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="col-lg-3 col-lg-offset-1 col-md-3 col-md-offset-2 col-xs-12 col-sm-push-1">
<button name="submit" id="submit" type="submit" value="submit" class="btn btn-default"><span class="glyphicon glyphicon-floppy-disk"></span>Enregistrer <span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Servlet
@WebServlet(name = "Account_Servlet", urlPatterns = {"/account"})
public class AccountServlet extends HttpServlet {
@EJB
private CompteEJBLocal compteEJB;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.sendRedirect("/home/ajouter_compte.jsp");
System.out.println("ok");
String action = request.getParameter("action");
System.out.println("action " + action);
switch (action) {
case "getClient": {
String numCli = request.getParameter("numClient");
Client foundCli = compteEJB.unClient(numCli);
System.out.println("client " + foundCli);
ObjectMapper map = new ObjectMapper();
String json = map.writeValueAsString(foundCli);
response.getWriter().println(json);
}
break;
default: {
}
break;
}
}
5 answers
solution1
0 2017-03-14 10:06:30
Use following format
$http({
url: 'account',
method: "GET",
params: {
action: "getClient",
numClient: $scope.numClient
}
})
.then(function(response) {
// success
},
function(response) { // optional
// failed
});
You have not called the method $scope.getClient in FORM or button it looks like
solution2
0 2017-03-14 10:35:06
i've edited the controller code like this: compteCtrl
I see nothing's even happening in the server console
See server console
solution3
0 2017-03-14 11:03:43
html file use data-ng-change="getClient(numClient)" instead of ng-blur="getClient()"
Angular Controller File
$scope.getClient = function(numClient) {
$http({
method: 'GET',
url: 'account',
params: {
action: "getClient",
numClient: numClient
}
}).success(function(data, status, headers, config) {
alert(ok);
$scope.nameCli = data.nomComplet;
$scope.adresse = data.adresse;
$scope.email = data.email;
$scope.tel = data.telephone;
$scope.sexe = data.sexe;
$scope.datenaiss = data.dateNaissance;
});
};
alert("ok");
}
solution4
0 2017-03-14 11:05:00
a view of how im showing the form in case it can help. enter image description here
The form load is not controlled by a servlet but by javascript script
solution5
0 2017-03-15 09:49:44
i know the source of the problem but i don't know how to fix it. When i separate the form from the menu and i load it directly from the do get of the servlet everything works fine.i can print message from the servlet and from the controller too. but once it's back to the menubar neither the servlet nor the angular controller can see the from even if the form is showing. I've loaded the from with a javascript code Scrpit for sidebarmenu
Another thing in my homePage angular is not being used. So is it then possible to use on a page which is loaded from the homePage(click of one element of the sidebarmenu) without using it in the homePage itself
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.