After I input data to my log page and navigate/route to the loglist page, it will not update what I recently inserted.I need to refresh manually to update what i recently inserted. I want it to update automatically when I navigate to loglist. How to do that in Angularjs?
Note: I have two route page, log and loglist.
*I used ajax in my forms. I don't want to include other things like css here so that it is easy for you to understand the codes.
html sample
<nav>
<ul>
<li><a>Walk-In</a>
<ul>
<li><a href="#/">Log</a></li>
<li><a href="#/loglist">Log List</a></li>
</ul>
</li>
</ul>
</nav>
<div id="content">
<div id="showcontent" ng-view>
</div>
</div>
log.php
<form id="member" method="post" action="../php/connect.php">
<fieldset style="width:400; border-width:6px;" align="center" >
<legend><h3>Member Log</h3><br><br></legend>
<p id="get_member"></p>
<input class="fname" type='text' name='firstname' id='firstname' placeholder="First Name" required/>
</br><input class="lname" type='text' name='lastname' id='lastname' placeholder="Last Name" required /></br>
</br><label for="male">Male </label><input type="radio" name="gender" id="male" required value="Male" />
<label for="female">Female </label><input type="radio" name="gender" id="female" value="Female" /><br />
<input type="hidden" name="date" id="date" value="">
<input type="hidden" name="time" id="time" value="">
<br><br><input type="submit" name="submit">
</fieldset>
</form>
loglist.php
<table id='table12' class='order-table table'>
<thead id='top'>
<tr id='tr'>
<th>ID No.</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>Time</th>
<th>Date</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "rmsdb";
$query=mysql_connect("localhost","root","");
mysql_select_db("rmsdb",$query);
$query1=mysql_query("select id, firstname, lastname, gender, time, datestamp from walkin");
while($query2=mysql_fetch_array($query1))
{
echo "<tr> <td>".$query2['id']."</td>
<td>".$query2['firstname']."</td>
<td>".$query2['lastname']."</td>
<td>".$query2['gender']."</td>
<td>".$query2['time']."</td>
<td>".$query2['datestamp']."</td></tr>";
}
?>
</tbody>
</table>
angular route
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'pages/log.php',
controller: 'mainController'
})
.when('/loglist', {
templateUrl: 'pages/loglist.php',
controller: 'secondController',
})
});
So.. I just now solved the problem. It's stupid because I just used angularjs just for my navigation. I didn't realized that I can use angularjs controller and create a table just like in my loglist.php. I just recently learn angularjs and I only knew the routeProvider just for the sake of my sidebar navigation not to refresh when clicked. nyahaha XD now I think I should learn more about angularjs because it's awesome :D
Here's what I've done. In my angularjs app I create a controller here's the code
app.js
myApp.controller('secondController', ['$scope', '$http', function ($scope, $http) {
$http.get("../php/loglistajax.php")
.success(function(data){
$scope.data = data;
})
.error(function() {
$scope.data = "error in fetching data";
});
}]);
I also create a file to fetch the data into my database loglistajax.php
<?php
//database settings
$connect = mysqli_connect("localhost", "root", "", "rmsdb");
$result = mysqli_query($connect, "select * from walkin_member");
$data = array();
while ($row = mysqli_fetch_array($result)) {
$data[] = $row;
}
print json_encode($data);
?>
and also for my loglist page
<body>
<br>
<h1>Log List</h1>
<input type="text" ng-model="searchFilter">
<div id='table-wrapper'>
<div id='table-scroll'>
<div ng-controller="secondController">
<table id='table12'>
<thead id='top'>
<tr>
<th>ID No.</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>Time</th>
<th>Date</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="walkin_member in data | filter:searchFilter">
<td>{{walkin_member.id}}</td>
<td>{{walkin_member.firstname}}</td>
<td>{{walkin_member.lastname}}</td>
<td>{{walkin_member.gender}}</td>
<td>{{walkin_member.time}}</td>
<td>{{walkin_member.datestamp}}</td>
<td>{{walkin_member.type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="../js/angular.min.js"></script>
<script src="../js/app.js"></script>
</body>
Given the code you've shown you really only have one option, to purge the template cache and force it to reload the loglist template. There is a related question answered here.
That being said, what you are doing is really counter to how AngularJS works. It would be better for you to turn the database query into a web service and then call that using the $http service from the secondController to get the data each time you navigate to the route.