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 :
Nom : capture.PNG Affichages : 418 Taille : 17,4 Ko

Merci d'avance.