What I must do: Near each and every user is an EDIT button. When I click the EDIT button, I am redirected to another page called \#\editMember which has fields where I can edit. Now I am trying that when I click EDIT, the fields are filled automatically with the user's information. The information should be placed regarding the user's id, so if I click the EDIT button of John Smith, John Smith's information is extracted to the fields.
My problem is that when I click the EDIT button the fields are not being filled and is giving me the below error. ReferenceError: $routeParams is not defined
UPDATE: I found out i had a missing / at .when('/memberEdit/:memberID...!
UPDATE 2: I have updated the post by inserting my index.html file paths.
UPDATE 3: Fields are not being filled automatically (empty) and Errors Solved. Changed code from
while($row = mysqli_affected_rows($result)) {
$data = $row;
}
to
while($row = mysqli_fetch_assoc($result)) {
$data = $row;
}
Thanks!
Here is my code:
HTML (Index page where links for files and etc are stored):
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css"/>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/javascript.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="angularApp.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="libraries/jquery.bxslider.css" rel="stylesheet" />
<title> Music </title>
</head>
HTML (MemberList which displays all users with buttons to edit):
<thead><tr> <th> Member Image </th><th>Name</th> <th>Surname</th> <th>Status</th> </tr></thead>
<tbody>
<tr ng-repeat="member in members | filter: searchTerm | orderBy: orderFilter">
<td> <a href="#/memberDetails"> <img class="image" ng-src="{{member.memberImage}}"> </a></td>
<td>{{member.name | uppercase}}</td>
<td>{{member.surname | uppercase}}</td>
<td>{{member.dateOfAffiliation | date}}</td>
<td>{{member.status}}</td>
<td>{{member.email}}</td>
<td>{{member.summary}}</td>
<td>
<button class="btn btn-primary" ng-click="deleteMember(member)"> DELETE </button>
</td>
<td>
<a href="#/memberEdit/{{member.memberID}}"> <button class="btn btn-primary"> EDIT </button> </a>
<br>
</td>
</tr>
</tbody>
</table>
HTML (MemberEdit page where fields are filled with member's information):
<div id="container">
<form class="form-group" id="customForms"> <!-- single controller-->
<label> Name </label>
<input id="customFormsInput" class="form-control" ng-model="member.name" type="text" placeholder="Name goes here" required/>
<br>
<label> Surname </label>
<input id="customFormsInput" class="form-control" ng-model="member.surname" type="text" placeholder="Surname goes here" required/>
<br>
<label> Date of Affiliation </label>
<input id="customFormsInput" class="form-control" ng-model="member.dateOfAffiliation" type="date" required/>
<br>
<label> Status </label>
<br>
<select ng-model="member.status">
<option disabled="disabled">Choose member status</option>
<option value="active">Active</option>
<option value="non-active">Non-Active</option>
</select>
<br><br>
<label> Email </label>
<input id="customFormsInput" class="form-control" ng-model="member.email" type="email" required/>
<br>
<label> Summary </label>
<br>
<textarea ng-model="member.summary" rows="2" cols="100" type="text" placeholder="Insert text here" required>
<!-- User text -->
</textarea>
<br> <br>
<br> <br>
<button class="btn btn-primary" type="submit"> Update </button>
<br> <br> <br>
<a href="#/memberList"> <button class="btn btn-primary"> Return to Member List</a> </button>
</form>
</div>
AngularJS app (Controller):
app.controller('editMemberCtrl', ['$scope', '$http', '$location', '$routeParams', function() {
var memberID = $routeParams.memberID;
console.log(id);
$scope.updateMessage = "";
$http.post('model/editMember.php', {'memberID': memberID}).success(function(data) {
$scope.members = data;
console.log("Got data of member" + data);
});
}]);
AngularJS App (routing):
var app = angular.module('ScrollingApp', ['ngRoute'])
.config( ['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'view/home.html'
})
.when('/promo', {
templateUrl: 'view/promoSection.html'
})
.when('/contactUs', {
templateUrl: 'view/contactUs.html', controller: 'mapController'
})
.when ('/aboutUs', {
templateUrl: 'view/aboutUs.html'
})
.when('/loginForm', {
templateUrl: 'view/loginForm.html'
})
.when('/memberList', {
templateUrl: 'view/memberList.html', controller: 'memberCtrl'
})
.when('/contactUsList', {
templateUrl: 'view/contactUsList.html'
})
.when('/memberDetails', {
templateUrl: 'view/memberDetails.html', controller: 'memberCtrl'
})
.when('/memberEdit/:memberID', {
templateUrl: 'view/memberEdit.html', controller: 'editMemberCtrl'
})
.otherwise({
redirectTo: '/home'
});
}]);
PHP (To read where id matches the one from the table):
<?php
$data = json_decode(file_get_contents("php://input"));
$memberID = $data->memberID;
require_once("connection.php");
$connection = connectToMySQL();
$query = "SELECT * FROM tbl_member WHERE memberID = $memberID";
$result = mysqli_query($connection, $query)
or die("Error in query: ". mysqli_error($connection));
while($row = mysqli_fetch_assoc($result)) {
$data = $row;
}
echo json_encode($data);
?>
Error Given:
ReferenceError: $routeParams is not defined
at new <anonymous> (http://localhost/music/angularApp.js:124:17)
at e (http://localhost/music/js/angular.min.js:39:394)
at Object.instantiate (http://localhost/music/js/angular.min.js:40:9)
at http://localhost/music/js/angular.min.js:80:442
at A.link (http://localhost/music/js/angular-route.min.js:7:268)
at ea (http://localhost/music/js/angular.min.js:73:293)
at D (http://localhost/music/js/angular.min.js:62:190)
at g (http://localhost/music/js/angular.min.js:55:105)
at http://localhost/music/js/angular.min.js:54:249
at http://localhost/music/js/angular.min.js:56:79 <div ng-view="" class="ng-scope">
You need to reference the angular-route javascript file in your html. Try adding the following line to your HTML tag (replace X.Y.Z with the version of AngularJS you are using:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
For example
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
You do not have the complete HTML code, so I cannot verify if this is indeed the issue.
It is hard to really tell the source of the problem without seeing the actual returned value.
But what I see: You are expecting an array of members as a result from your query, but the PHP returns one row:
while($row = mysqli_affected_rows($result)) {
$data = $row;
}
echo json_encode($data);
Thus, when you are iterating over the row, you will not have keys and values, but rather a column of columns. The column in turn have obviously no such property as .name or .surname.
Update:
Another issue is, that your PHP code does not return the content type Content-type: text/json. Angulars $http service will use the content type to decide, if your response string is JSON. Earlier versions of ng used regex to identify json, but that has been given up in favor of the content type containing json (https://github.com/angular/angular.js/issues/2973).
So, try adding a content-type header on the PHP response like application/json or text/json and try again.
header('Content-Type: application/json');
SOLVED
Apparently my ng-model was not matching with the $scope.members = data; My mistake was that I written members.name instead of member.name
(I'm a little mad :))