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">
