Discussion :

[didate]

Bonjour,

Je veux poster des données via un formulaire avec angular js.

Le 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
<div ng-controller="clientCtrl" ng-init="getLocalisations();">
	<form action="#client/list" method="post">
        <div class="input-group col-md-4">
		 <label for="nom">NOM</label>
		  <input type="text" class="form-control" placeholder="Nom du client" aria-describedby="sizing-addon1" 
		  	name="nom" 
		  	required ng-model="client.nom"> 
 
		</div>
		<br/>
		<div class="input-group col-md-4">
		  <label for="contact">Contact</label>
		  <input type="text" class="form-control" placeholder="Contact du client" aria-describedby="sizing-addon1" 
		  	name="contact"  
		  	required  ng-model="client.contact">
 
		</div>
		<br/>
 
		<div class="input-group col-md-4">
		  <label for="localisation">Localisation</label>
		  <select name="localisation" id="localisation" class="form-control" ng-model="client.localisation">
		  	<option ng-repeat="item in localisations" 
	  			ng-selected="client.localisation == item.id" 
	  			ng-value="item.id">
	  			{{item.value}}
		  	</option>
		  </select>		  
		</div>
		<br/>
 
 
		<div>
			<button type="submit" class="btn btn-primary btn-xs" ng-click="addClient()"> Valider</button>
		</div>
	</form>
 
	<!-- ce button me sert juste de test -->
	<button ng-click="addClient()">Bonjour</button>
</div>

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
app =angular.module('app-dashbord', ['ngAnimate','ngRoute']);
 
 
app.config(['$routeProvider',function($routeProvider) {
 
	$routeProvider.when('/client/list', {
		templateUrl : 'partials/clients/index.php',
		controller : 'clientCtrl'
	})
	.when('/client/au', {
		templateUrl : 'partials/clients/add.php',
		controller : 'clientCtrl'
	})
	.when('/action',{
		templateUrl : 'partials/action.html',
		controller : 'dashbordCtrl'
	})
	/*.otherwise ({
			redirectTo: '/list'
		});*/
 
}]);
 
app.factory('service', ['$http', function ($http) {
 
	var obj ={};
 
	obj.getClients = function(){
		return $http.get('server/index.php/client/index');
	}
 
	obj.getLocalisations = function(){
		return $http.get('server/index.php/localisation/getLocatisations');
	}
 
	obj.addClient = function(client,fn){
		$http.post('server/index.php/client/add',client).then(function(result){
			fn(result);
		}, function(result){
			fn(result);
		});
	}
 
	return obj;
}])
 
 
app.controller('clientCtrl', ['$scope','$http' ,'service', function ($scope,$http,service) {
	//$scope.client = {nom : null, contact :null, localisation :null};
 
	$scope.getClients = function(){
		service.getClients().success(function(data){
			$scope.clients = data['clients'];
		}).error(function(data){
			console.log("une erreur");
		})
	}
 
	$scope.getLocalisations =  function(){
		service.getLocalisations().success(function(data){
			$scope.localisations = data['localisations'];
		}).error(function(data){
			console.log('une erreur');
		})
	}
 
	$scope.addClient = function(){
		service.addClient($scope.client,function(data){
			console.log(data);
		})
	}
 
	/*$scope.setDataForUpdate = function(client){
		$scope.client ={nom :client.nom, contact : client.contact, localisation: client.localisation};
	};*/
 
 
}]);

La fonction backend appelée :

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
	public function add()
	{
		$return = array();
		try{
			$postdata = file_get_contents("php://input");
			$request = json_decode($postdata);
 
			$id = $this->client_model->create(array('nom' => $request->nom , 
														'contact' => $request->contact, 
														'Localisation_id' =>$request->localisation
													)
												);
			if ($id){
				$return['statut'] = 'success';
				$return['message'] = 'Client ajouté avec succès.';
			}
			else
			{
				$return['statut'] = 'error';
				$return['message'] = 'Echec d\'ajout du client.';
			}
 
			//$handle = fopen("C:\Users\ml.diallo\Desktop\log.txt","w");
			// fwrite($handle,var_export(json_encode($return),true));
			// fclose($handle);
			//$this->output->set_content_type('Content-Type: application/json; charset=utf-8')->set_output(json_encode($return));
		}catch(Exception $e){
			$return['statut'] = 'error';
			$return['message'] = 'Echec d\'ajout du client.';
			$return['exception'] = $e->getMessage();
 
		}
		print_r(json_encode($return));
	}

Dans le html j'ai deux boutons, l'un de type submit et l'autre je n'ai rien mis. Ces deux boutons appellent la même fonction addClient via ng-click.

1) Quand je clique sur le deuxième bouton, l'appel ajax se passe bien, les données sont insérées en base et l'object $return est renvoyé (le problème avec cette méthode c'est que la validation du formulaire ne marche pas. Logique !).

2) Quand je clique sur le premier bouton (type submit), là aussi l'appel ajax se passe bien, les données sont insérées en base mais par contre l'objet $return n'est pas renvoyé. Et coté js la fonction error est appelée.

Voici-ci le résultat dans la console :


Merci d'avance.

[didate]

J'ai finalement trouvé la (une) solution :

au niveau de l'entête du form j'ai remplacer

Code :

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

<form action="#client/list" method="post">

Par

Code :

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

<form name="formAdd">

le button de validation j'ai enlevé le type submit pour avoir

Code :

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

<button  class="btn btn-primary btn-xs" ng-click="addClient()"> Valider</button>

Au niveau du JS j'utilise la validation d'angular

Code :

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

1
2
3
4
 
if($scope.formAdd.$valid){
 // le machin d'insertion ici
}

Pour faire la redirection après la validation du form, je peux utiliser soit window.location soit le module de redirection d'angular .....

ET c'est tout.....

Merci à vous