Difficulté pour afficher les attributs d'un objet dans une pop up

**francky74** · 28/05/2016, 18h32

Bonjour,

Je rencontre des difficultés pour afficher les données d'un objet dans une pop-up.

A la base, je déclenche un appel http grâce auquel je passe à mon serveur l'identifiant de l'objet. Le serveur me renvoie bien l'objet car je le vois dans mon navigateur en mode debug et notament grâce aux console.log.
Ensuite, une pop-up s'ouvre et je désire que les valeurs de l'objet soient inscrite dans des input text mais là j'ai du mal ....

Voici le code HTML du bouton qui envoie l'identifiant de l'objet et povoque l'ouverture d'une pop-up :

Code html :

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

<button class="btn btn-default" ng-click="modifier_client(client.idClient)">Modifier</button>

voici la fonction javascript qui contient la fonction appelée par le bouton et qui ouvre la pop-up :

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
$scope.modifier_client = function(idClient) {
	   console.log("modifier_client id : " + idClient);
	   $http.post('../gestClients/modifier', {
		   "clientID":idClient
	   }).then(function successCallbak(response){
		   	$scope.clientModif = response.data.client;
		   	console.log("succes modification client - nom : " + $scope.clientModif.nom);
 
		   	var popID = 'popUpModif'; //la pop-up correspondante
		   	var largeur_fenetre = $(window).width();
		   	if(largeur_fenetre < 1500){
				var popWidth = largeur_fenetre - largeur_fenetre * 0.1; //la largeur
		   	} else {
				var popWidth = largeur_fenetre - largeur_fenetre * 0.3; //la largeur
		   	}
 
			//Faire apparaitre la pop-up et ajouter le bouton de fermeture
			$('#' + popID).fadeIn().css({
				'width': Number(popWidth)
			});
 
			//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
			var popMargTop = ($('#' + popID).height() + 80) / 2;
			var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
			//On affecte le margin
			$('#' + popID).css({
				'margin-top' : -popMargTop,
				'margin-left' : -popMargLeft
			});
 
			//Effet fade-in du fond opaque
			$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
			//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
			$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
			//Fermeture de la pop-up et du fond
			$('a.close, #annulerModif, #validerModif').on('click', function() { //Au clic sur le bouton ou sur le calque...
			   	$('#fade , .popup_block').fadeOut(function() {
			   		$('#fade, a.close').remove();  //...ils disparaissent ensemble
			   	});
			   	return false;
			});
 
			return false;
 
	   }, function errorCallback(response){
		   console.log("problème modification client");
	   });
   }

Voici le code HTML de la pop-up (c'est à la ligne 8 que l'on voit l'input dans lequel je souhaite afficher une donnée issue du javascript) :

Code html :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<div id="popUpModif" class="popup_block" ng-controller="clientCtrl" ng-model="clientModif">
	        <div style="text-align:center;">
	        	<label style="color:#c7b988;">Identité</label><br />
	        </div>
	        <div>
	        	<div id="tablesInlineBlock" style="width:49%;">
	        		<div id="tablesBlock" style="display:none">
	        			<input type="text" class="form-control" value="{{nom}}" style="width:200px;"/>
	       			</div>
	        		<div id="tablesBlock">
	        			<label>Nom</label>
	       			</div>
	        		<div id="tablesBlock" style="min-width: 270px;">
	        			<input type="text" class="form-control" ng-model="client_nom" style="width:200px;" value=""/>
	       			</div>
	        	</div>
	        	<div id="tablesInlineBlock" style="width:50%;">
	        		<div  id="tablesBlock">
	        			<label>Prénom</label>
	        		</div>
	        		<div id="tablesBlock" style="min-width: 250px;">
	        			<input type="text" class="form-control"  ng-model="client_prenom" style="width:200px;"/>
	       			</div>
	        	</div>
	        </div>
			<div style="text-align:center;">
	        	<label style="color:#c7b988;">Adresse</label><br />
	        </div>
	        <div>
	        	<div id="tablesInlineBlock" style="width:24%;">
	        		<div id="tablesBlock">
	        			<label>Numéro</label>
	       			</div>
	        		<div id="tablesBlock" style="min-width: 60px;">
	        			<input id="numVoie" type="text" class="form-control"  ng-model="client_numVoie" maxlength="8" style="width:110px;"/>
	       			</div>
	        	</div>
	        	<div id="tablesInlineBlock" style="width:30%;">
	        		<div id="tablesBlock">
	        			<label>Voie</label>
	       			</div>
	        		<div id="tablesBlock" style="min-width: 170px;">
	        			<select id="typeVoie" class="form-control" ng-model="client_typeVoie" style="width:150px;">
	           	<option>Impasse</option>
	           	<option>Route</option>
	           	<option selected="selected">Rue</option>
	           	<option>Autre</option>
	           </select>
	       			</div>
	        	</div>
	        	<div id="tablesInlineBlock" style="width:45%;">
	        		<div  id="tablesBlock">
	        			<label>Nom voie</label>
	        		</div>
	        		<div id="tablesBlock" style="min-width: 250px;">
	        			<input id="nomVoie" type="text" class="form-control" ng-model="client_nomVoie"/>
	       			</div>
	        	</div>
	        </div>
	        <div>
	        	<div id="tablesInlineBlock" style="width:49%;">
	        		<div id="tablesBlock">
	        			<label>Code postal</label>
	       			</div>
	        		<div id="tablesBlock" style="min-width: 90px;">
	        			<input id="codePostal" type="text" class="form-control" ng-model="client_codePostal" maxlength="5" style="width:110px;"/>
	       			</div>
	        	</div>
	        	<div id="tablesInlineBlock" style="width:50%;">
	        		<div  id="tablesBlock">
	        			<label>Ville</label>
	        		</div>
	        		<div id="tablesBlock" style="min-width: 290px;">
	        			<input id="ville" type="text" class="form-control" ng-model="client_ville" style="width:250px;"/>
	       			</div>
	        	</div>
	        </div>
	        <div style="margin-top:15px">
	        	<span class="input-group-btn">
	                <button id="validerModif" class="btn btn-success"
	                        ng-click="valider_modification(client_id, client_nom, client_prenom, client_numVoie, client_typeVoie, client_nomVoie, client_codePostal, client_ville);">
	                        Valider
	                </button>
	                <button id="annulerModif" class="btn btn-warning" style="margin-left:15px">
	                        Annuler
	                </button>
	            </span>
	        </div>
		</div>
	</div>

Et voici les deux fichiers HTML et javascript dans lequel les bouts de code précédent sont inclus (le bouton se situe à la ligne 150 et la pop-up débute à la ligne 158):
HTML :

Code html :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html ng-app="chezYenApp">
<head>
	<meta charset="ISO-8859-1">
	<title>Gestion des clients</title>
	<link type="text/css" rel="stylesheet" href="../css/bootstrap.css" />
	<link type="text/css" rel="stylesheet" href="../css/bootstrap-theme" />
	<link type="text/css" rel="stylesheet" href="../css/gestion_clients.css" />
	<link type="text/css" rel="stylesheet" href="../css/header.css" />
	<script type="text/javascript" src="../js/jquery-2.2.0.js"></script>
	<script type="text/javascript" src="../js/angular.js"></script>
	<script type="text/javascript" src="../js/angular-route.js"></script>
	<script type="text/javascript" src="../js/gestion_clients.js"></script>
	<script type="text/javascript" src="../js/productController.js"></script>
	<script type="text/javascript" src="../js/chezYenDirective.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script>
$(document).ready(function(){
        $("#nouveauClient").on('click', function() {
                console.log("clicked");
                $("#panelNouveauClient").slideToggle(600);
        });
});
</script>
</head>
<body id="body">
	<div id="chezYenBar">
		<img id="left" src="../images/logo_stylise.png" class="img-responsive center-block"/>
		<div id="center">
			<h3 style="color:#fff8d7;"><a style="color:#fff8d7;" href="../index.html">ACCEUIL</a> / GESTION CLIENTS</h3>
		</div>
		<img id="right" src="../images/logo_stylise.png" class="img-responsive center-block"/>
	</div>
	<div class="container">
		<div id="firstRow" class="row">
			<div class="col-sm-12"  ng-controller="clientCtrl" style="padding-right:30px;">
				<div id="nouveauClient" style="text-align:center;">
					Créer un nouveau client
				</div>
				<div id="panelNouveauClient">
					<div class="encadre" style="height:130px; min-width: 600px;">
		                <div style="text-align:center;">
		                	<label style="color:#c7b988;">Identité</label><br />
		                </div>
		                <div>
		                	<div id="tablesInlineBlock" style="width:49%;">
		                		<div id="tablesBlock">
		                			<label>Nom</label>
	                			</div>
		                		<div id="tablesBlock" style="min-width: 270px;">
		                			<input type="text" class="form-control" ng-model="client_nom" style="width:200px;"/>
	                			</div>
		                	</div>
		                	<div id="tablesInlineBlock" style="width:50%;">
		                		<div  id="tablesBlock">
		                			<label>Prénom</label>
		                		</div>
		                		<div id="tablesBlock" style="min-width: 250px;">
		                			<input type="text" class="form-control"  ng-model="client_prenom" style="width:200px;"/>
	                			</div>
		                	</div>
		                </div>
	                </div>
	                <div class="encadre" style="min-width: 600px;">
		                <div style="text-align:center;">
		                	<label style="color:#c7b988;">Adresse</label><br />
		                </div>
		                <div>
		                	<div id="tablesInlineBlock" style="width:24%;">
		                		<div id="tablesBlock">
		                			<label>Numéro</label>
	                			</div>
		                		<div id="tablesBlock" style="min-width: 60px;">
		                			<input id="numVoie" type="text" class="form-control"  ng-model="client_numVoie" maxlength="8" style="width:110px;"/>
	                			</div>
		                	</div>
		                	<div id="tablesInlineBlock" style="width:30%;">
		                		<div id="tablesBlock">
		                			<label>Voie</label>
	                			</div>
		                		<div id="tablesBlock" style="min-width: 170px;">
		                			<select id="typeVoie" class="form-control" ng-model="client_typeVoie" style="width:150px;">
					                	<option>Impasse</option>
					                	<option>Route</option>
					                	<option selected="selected">Rue</option>
					                	<option>Autre</option>
					                </select>
	                			</div>
		                	</div>
		                	<div id="tablesInlineBlock" style="width:45%;">
		                		<div  id="tablesBlock">
		                			<label>Nom voie</label>
		                		</div>
		                		<div id="tablesBlock" style="min-width: 250px;">
		                			<input id="nomVoie" type="text" class="form-control" ng-model="client_nomVoie"/>
	                			</div>
		                	</div>
		                </div>
		                <div>
		                	<div id="tablesInlineBlock" style="width:49%;">
		                		<div id="tablesBlock">
		                			<label>Code postal</label>
	                			</div>
		                		<div id="tablesBlock" style="min-width: 90px;">
		                			<input id="codePostal" type="text" class="form-control" ng-model="client_codePostal" maxlength="5" style="width:110px;"/>
	                			</div>
		                	</div>
		                	<div id="tablesInlineBlock" style="width:50%;">
		                		<div  id="tablesBlock">
		                			<label>Ville</label>
		                		</div>
		                		<div id="tablesBlock" style="min-width: 290px;">
		                			<input id="ville" type="text" class="form-control" ng-model="client_ville" style="width:250px;"/>
	                			</div>
		                	</div>
		                </div>
	                </div>
	                <span class="input-group-btn">
	                    <button class="btn btn-default"
	                            ng-click="nouveau_client(client_nom, client_prenom, client_numVoie, client_typeVoie, client_nomVoie, client_codePostal, client_ville);">
	                            Ajouter client
	                    </button>
	                </span>
				</div>
				<table id="tableClients" class="table table-striped">
					<thead>
						<tr>
							<th>Nom</th>
							<th>Prénom</th>
							<th>Adresse</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="client in clients">
							<td style="display: none;" ng-model="idClient">{{client.idClient}}</td>
							<td>{{erreurs.message}}{{client.nom}}</td>
							<td>{{client.prenom}}</td>
							<td>{{client.adresse.numeroVoie + ", " +
                                                                 client.adresse.typeVoie + " " + 
                                                                 client.adresse.nomVoie + " " + 
                                                                 client.adresse.codePostal + " " + 
                                                                 client.adresse.ville}}
							 </td>
							<td>					
								<button class="btn btn-default" ng-click="modifier_client(client.idClient)">Modifier</button>
								<button class="btn btn-danger" ng-click="supprimer_client(client.idClient);">Supprimer</button>
							</td>
						</tr>
				</table>
			</div>
		</div>
 
		<div id="popUpModif" class="popup_block" ng-controller="clientCtrl" ng-model="clientModif">
	        <div style="text-align:center;">
	        	<label style="color:#c7b988;">Identité</label><br />
	        </div>
	        <div>
	        	<div id="tablesInlineBlock" style="width:49%;">
	        		<div id="tablesBlock" style="display:none">
	        			<input type="text" class="form-control" value="{{nom}}" style="width:200px;"/>
	       			</div>
	        		<div id="tablesBlock">
	        			<label>Nom</label>
	       			</div>
	        		<div id="tablesBlock" style="min-width: 270px;">
	        			<input type="text" class="form-control" ng-model="client_nom" style="width:200px;" value=""/>
	       			</div>
	        	</div>
	        	<div id="tablesInlineBlock" style="width:50%;">
	        		<div  id="tablesBlock">
	        			<label>Prénom</label>
	        		</div>
	        		<div id="tablesBlock" style="min-width: 250px;">
	        			<input type="text" class="form-control"  ng-model="client_prenom" style="width:200px;"/>
	       			</div>
	        	</div>
	        </div>
			<div style="text-align:center;">
	        	<label style="color:#c7b988;">Adresse</label><br />
	        </div>
	        <div>
	        	<div id="tablesInlineBlock" style="width:24%;">
	        		<div id="tablesBlock">
	        			<label>Numéro</label>
	       			</div>
	        		<div id="tablesBlock" style="min-width: 60px;">
	        			<input id="numVoie" type="text" class="form-control"  ng-model="client_numVoie" maxlength="8" style="width:110px;"/>
	       			</div>
	        	</div>
	        	<div id="tablesInlineBlock" style="width:30%;">
	        		<div id="tablesBlock">
	        			<label>Voie</label>
	       			</div>
	        		<div id="tablesBlock" style="min-width: 170px;">
	        			<select id="typeVoie" class="form-control" ng-model="client_typeVoie" style="width:150px;">
	           	<option>Impasse</option>
	           	<option>Route</option>
	           	<option selected="selected">Rue</option>
	           	<option>Autre</option>
	           </select>
	       			</div>
	        	</div>
	        	<div id="tablesInlineBlock" style="width:45%;">
	        		<div  id="tablesBlock">
	        			<label>Nom voie</label>
	        		</div>
	        		<div id="tablesBlock" style="min-width: 250px;">
	        			<input id="nomVoie" type="text" class="form-control" ng-model="client_nomVoie"/>
	       			</div>
	        	</div>
	        </div>
	        <div>
	        	<div id="tablesInlineBlock" style="width:49%;">
	        		<div id="tablesBlock">
	        			<label>Code postal</label>
	       			</div>
	        		<div id="tablesBlock" style="min-width: 90px;">
	        			<input id="codePostal" type="text" class="form-control" ng-model="client_codePostal" maxlength="5" style="width:110px;"/>
	       			</div>
	        	</div>
	        	<div id="tablesInlineBlock" style="width:50%;">
	        		<div  id="tablesBlock">
	        			<label>Ville</label>
	        		</div>
	        		<div id="tablesBlock" style="min-width: 290px;">
	        			<input id="ville" type="text" class="form-control" ng-model="client_ville" style="width:250px;"/>
	       			</div>
	        	</div>
	        </div>
	        <div style="margin-top:15px">
	        	<span class="input-group-btn">
	                <button id="validerModif" class="btn btn-success"
	                        ng-click="valider_modification(client_id, client_nom, client_prenom, client_numVoie, client_typeVoie, client_nomVoie, client_codePostal, client_ville);">
	                        Valider
	                </button>
	                <button id="annulerModif" class="btn btn-warning" style="margin-left:15px">
	                        Annuler
	                </button>
	            </span>
	        </div>
		</div>
	</div>
</body>
</html>

javascript :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
// cette ligne crée un nouveau module angular
// le tableau en deuxieme argument contient les
// dépendances a injecter dans ce module
var chezYenApp = angular.module("chezYenApp", []);
 
// Création d'un controlleur "StoreCtrl" dans notre module
// le scope est automatiquement injecté par angular
chezYenApp.controller("clientCtrl", function($scope, $http) {
   $scope.clients = [];
   $scope.clientModif;
 
   $http.get('../gestClients/repertoire').then(function (response) {
       $scope.clients = response.data.clients;
   });
 
   $scope.nouveau_client = function(nom, prenom, numVoie, typeVoie, nomVoie, codePostal, ville){
	   console.log("nouveau client");
	   $http.post('../gestClients/nouveau', {
		   	"clientNom": nom,
		   	"clientPrenom": prenom,
		   	"clientNumeroVoie": numVoie,
		   	"clientTypeVoie": typeVoie,
		   	"clientNomVoie": nomVoie,
		   	"clientCodePostal": codePostal,
		   	"clientVille": ville
		   }).success(function(response) {
			   $scope.clients.push(response.client);
		   }).error(function(response){
			   $scope.erreurs.push(response.erreurs);
		   });
   };
 
   $scope.supprimer_client = function(idClient){
	   console.log("supprimer_client id : " + idClient);
	   $http.post('../gestClients/supprimer', {
	   "clientID": idClient
	   }).then(function successCallback(response) {	  
		   	console.log("succes suppression client");
		    $scope.clients = response.data.clients;
	   }, function errorCallback(response) {
		  	console.log("problème suppression client");
	   });
   };
 
   $scope.modifier_client = function(idClient) {
	   console.log("modifier_client id : " + idClient);
	   $http.post('../gestClients/modifier', {
		   "clientID":idClient
	   }).then(function successCallbak(response){
		   	$scope.clientModif = response.data.client;
		   	console.log("succes modification client - nom : " + $scope.clientModif.nom);
 
		   	var popID = 'popUpModif'; //la pop-up correspondante
		   	var largeur_fenetre = $(window).width();
		   	if(largeur_fenetre < 1500){
				var popWidth = largeur_fenetre - largeur_fenetre * 0.1; //la largeur
		   	} else {
				var popWidth = largeur_fenetre - largeur_fenetre * 0.3; //la largeur
		   	}
 
			//Faire apparaitre la pop-up
			$('#' + popID).fadeIn().css({
				'width': Number(popWidth)
			});
 
			//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
			var popMargTop = ($('#' + popID).height() + 80) / 2;
			var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
			//On affecte le margin
			$('#' + popID).css({
				'margin-top' : -popMargTop,
				'margin-left' : -popMargLeft
			});
 
			//Effet fade-in du fond opaque
			$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
			//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
			$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
			//Fermeture de la pop-up et du fond
			$('a.close, #annulerModif').on('click', function() { //Au clic sur le bouton ou sur le calque...
			   	fermeturePopUp();
			   	return false;
			});
 
			return false;
 
	   }, function errorCallback(response){
		   console.log("problème modification client");
	   });
   }
 
   $scope.valider_modification = function(id, nom, prenom, numVoie, typeVoie, nomVoie, codePostal, ville) {
	   console.log("gestion_clients - Valider modification");
	   if(id != null){
		   $http.post('../gestClients/valider_modification', {
			   	"clientId": id,
			   	"clientNom": nom,
			   	"clientPrenom": prenom,
			   	"clientNumeroVoie": numVoie,
			   	"clientTypeVoie": typeVoie,
			   	"clientNomVoie": nomVoie,
			   	"clientCodePostal": codePostal,
			   	"clientVille": ville
			   }).success(function(response) {
				   $scope.clients = response.data.clients;
			   }).error(function(response){
				   $scope.erreurs.push(response.erreurs);
			   });
	   } else {
		   console.log("client null");
	   }
	   fermeturePopUp();
   }
 
 
   function fermeturePopUp(){
	   console.log("fermeture pop-up");
	   $('#fade , .popup_block').fadeOut(function() {
	   		$('#fade, a.close').remove();  //...ils disparaissent ensemble
	   	});
   }
});

Merci de bien vouloir m'aider !

**francky74** · 30/05/2016, 17h24

J'ai trouvé la solution !!!

Voici le pop-up dans le fichier html :

Code html :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<div id="popUpModif" class="popup_block" ng-model="clientModif">
       <div style="text-align:center;">
       	<label style="color:#c7b988;">Identité</label><br />
       </div>
       <div>
       	<div id="tablesInlineBlock" style="width:49%;">
       		<div id="tablesBlock" style="display:none">
       			<input id="idClientModif" type="text" class="form-control"  ng-model="clientModif.idClient" style="width:200px;"/>
      			</div>
       		<div id="tablesBlock">
       			<label>Nom</label>
      			</div>
       		<div id="tablesBlock" style="min-width: 270px;">
       			<input type="text" class="form-control" ng-model="clientModif.nom" style="width:200px;" value=""/>
      			</div>
       	</div>
       	<div id="tablesInlineBlock" style="width:50%;">
       		<div  id="tablesBlock">
       			<label>Prénom</label>
       		</div>
       		<div id="tablesBlock" style="min-width: 250px;">
       			<input type="text" class="form-control"  ng-model="clientModif.prenom" style="width:200px;"/>
      			</div>
       	</div>
       </div>
	<div style="text-align:center;">
       	<label style="color:#c7b988;">Adresse</label><br />
       </div>
       <div>
       	<div id="tablesInlineBlock" style="width:24%;">
       		<div id="tablesBlock">
       			<label>Numéro</label>
      			</div>
       		<div id="tablesBlock" style="min-width: 60px;">
       			<input id="numVoie" type="text" class="form-control"  ng-model="clientModif.adresse.numeroVoie" maxlength="8" style="width:110px;"/>
      			</div>
       	</div>
       	<div id="tablesInlineBlock" style="width:30%;">
       		<div id="tablesBlock">
       			<label>Voie</label>
      			</div>
       		<div id="tablesBlock" style="min-width: 170px;">
       			<select id="typeVoie" class="form-control" ng-model="clientModif.adresse.typeVoie" style="width:150px;">
          	<option>Impasse</option>
          	<option>Route</option>
          	<option selected="selected">Rue</option>
          	<option>Autre</option>
          </select>
      			</div>
       	</div>
       	<div id="tablesInlineBlock" style="width:45%;">
       		<div  id="tablesBlock">
       			<label>Nom voie</label>
       		</div>
       		<div id="tablesBlock" style="min-width: 250px;">
       			<input id="nomVoie" type="text" class="form-control" ng-model="clientModif.adresse.nomVoie"/>
      			</div>
       	</div>
       </div>
       <div>
       	<div id="tablesInlineBlock" style="width:49%;">
       		<div id="tablesBlock">
       			<label>Code postal</label>
      			</div>
       		<div id="tablesBlock" style="min-width: 90px;">
       			<input id="codePostal" type="text" class="form-control" ng-model="clientModif.adresse.codePostal" maxlength="5" style="width:110px;"/>
      			</div>
       	</div>
       	<div id="tablesInlineBlock" style="width:50%;">
       		<div  id="tablesBlock">
       			<label>Ville</label>
       		</div>
       		<div id="tablesBlock" style="min-width: 290px;">
       			<input id="ville" type="text" class="form-control" ng-model="clientModif.adresse.ville" style="width:250px;"/>
      			</div>
       	</div>
       </div>
       <div style="margin-top:15px">
       	<span class="input-group-btn">
               <button id="validerModif" class="btn btn-success"
                       ng-click="valider_modification(
                       				clientModif.idClient, 
                       				clientModif.nom, 
                       				clientModif.prenom, 
                       				clientModif.adresse.numeroVoie, 
                       				clientModif.adresse.typeVoie, 
                       				clientModif.adresse.nomVoie, 
                       				clientModif.adresse.codePostal, 
                       				clientModif.adresse.ville);">
                       Valider
               </button>
               <button id="annulerModif" class="btn btn-warning" style="margin-left:15px">
                       Annuler
               </button>
           </span>
       </div>
</div>

Et le JavaScript :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
// cette ligne crée un nouveau module angular
// le tableau en deuxieme argument contient les
// dépendances a injecter dans ce module
var chezYenApp = angular.module("chezYenApp", []);
 
// Création d'un controlleur "StoreCtrl" dans notre module
// le scope est automatiquement injecté par angular
chezYenApp.controller("clientCtrl", function($scope, $http) {
   $scope.clients = [];
   $scope.clientModif;
 
   $http.get('../gestClients/repertoire').then(function (response) {
       $scope.clients = response.data.clients;
   });
 
   $scope.nouveau_client = function(nom, prenom, numVoie, typeVoie, nomVoie, codePostal, ville){
	   console.log("nouveau client");
	   $http.post('../gestClients/nouveau', {
		   	"clientNom": nom,
		   	"clientPrenom": prenom,
		   	"clientNumeroVoie": numVoie,
		   	"clientTypeVoie": typeVoie,
		   	"clientNomVoie": nomVoie,
		   	"clientCodePostal": codePostal,
		   	"clientVille": ville
		   }).success(function(response) {
			   $scope.clients.push(response.client);
		   }).error(function(response){
			   $scope.erreurs.push(response.erreurs);
		   });
   };
 
   $scope.supprimer_client = function(idClient){
	   console.log("supprimer_client id : " + idClient);
	   $http.post('../gestClients/supprimer', {
	   "clientID": idClient
	   }).then(function successCallback(response) {	  
		   	console.log("succes suppression client");
		    $scope.clients = response.data.clients;
	   }, function errorCallback(response) {
		  	console.log("problème suppression client");
	   });
   };
 
   $scope.modifier_client = function(idClient) {
	   console.log("modifier_client id : " + idClient);
	   $http.post('../gestClients/modifier', {
		   "clientID":idClient
	   }).then(function successCallbak(response){
		   	$scope.clientModif = response.data.client;
		   	console.log("succes modification client - nom : " + $scope.clientModif.nom);
 
		   	var popID = 'popUpModif'; //la pop-up correspondante
		   	var largeur_fenetre = $(window).width();
		   	if(largeur_fenetre < 1500){
				var popWidth = largeur_fenetre - largeur_fenetre * 0.1; //la largeur
		   	} else {
				var popWidth = largeur_fenetre - largeur_fenetre * 0.3; //la largeur
		   	}
 
			//Faire apparaitre la pop-up
			$('#' + popID).fadeIn().css({
				'width': Number(popWidth)
			});
 
			//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
			var popMargTop = ($('#' + popID).height() + 80) / 2;
			var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
			//On affecte le margin
			$('#' + popID).css({
				'margin-top' : -popMargTop,
				'margin-left' : -popMargLeft
			});
 
			//Effet fade-in du fond opaque
			$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
			//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
			$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
			$('#' + popID).attr("clientModifID", $scope.clientModif.nom);
 
			return false;
 
	   }, function errorCallback(response){
		   console.log("problème modification client");
	   });
   }
 
   $scope.valider_modification = function(id, nom, prenom, numVoie, typeVoie, nomVoie, codePostal, ville) {
	   console.log("gestion_clients - Valider modification");
	   if(id != null){
		   $http.post('../gestClients/valider_modification', {
			   	"clientId": id,
			   	"clientNom": nom,
			   	"clientPrenom": prenom,
			   	"clientNumeroVoie": numVoie,
			   	"clientTypeVoie": typeVoie,
			   	"clientNomVoie": nomVoie,
			   	"clientCodePostal": codePostal,
			   	"clientVille": ville
			   }).success(function(response) {
				   $scope.clients = response.data.clients;
			   }).error(function(response){
				   $scope.erreurs.push(response.erreurs);
			   });
	   } else {
		   console.log("client null");
	   }
	   fermeturePopUp();
   }
 
 //Fermeture de la pop-up et du fond
 $('a.close, #annulerModif').on('click', function() { //Au clic sur le bouton ou sur le calque...
    	fermeturePopUp();
    	return false;
 });
});
 
 
 
function fermeturePopUp(){
	   console.log("fermeture pop-up");
	   $('#fade , .popup_block').fadeOut(function() {
	   		$('#fade, a.close').remove();  //...ils disparaissent ensemble
	   	});
}

Enjoy.

**Marco46** · 31/05/2016, 10h23

jQuery pour modifier le DOM dans un contrôleur, ajouter des évènements au lieu d'utiliser ceux d'angular ...

Tu as pris le temps de faire les tutoriaux ?

Difficulté pour afficher les attributs d'un objet dans une pop up

AngularJS

Discussions similaires

Partager

Partager