How to add AUTO REFRESH in ANGULAR JS

Question

Im trying to add auto refresh feature on my system using angular js but i cannot find correct tutorial for this. Please can someone help me.

the auto refresh feature will be use for automatic update on the record list, when someone enters some data it will automatically display on the list without refreshing the whole page.

<table class="table table-striped">
<thead>
    <tr>
        <center><th>UNIT</th></center>
        <center><th>QUANTITY (PCS)</th></center>
        <center><th>ACTION</th></center>
    </tr>
</thead>
<tbody>
    
</tbody>
<tr ng-repeat="student in students | filter:searchUser">
    <td>{{ student.name }}</td>
    <td>{{ student.email }}</td>
    <td>
    <button class="btn btn-info" ng-click="updateData(student.id, student.name, student.email)">Update</button>
    <button class="btn btn-danger" ng-click="deleteData(student.id)">Remove</button>
    </td>
</tr>
</table>

<script src="js/angular.js"></script>
<script src="js/app.js"></script>

var app = angular.module('crudApp', []);

app.controller('crudController', function($scope, $http) {

$scope.buttonName = "Add";

$scope.displayUsers = function() {
    $http.get('select.php')
    .success(function(data) {
        $scope.students = data;
    })
}

$scope.insertData = function() {
    if($scope.name==null || $scope.email==null) {
        $scope.message_color = "red";
        $scope.message = "All fields are required.";
    } else {

        $http.post('insert.php', {
        'name': $scope.name, //ng-model of textbox name
        'email': $scope.email, //ng-model of textbox email
        'buttonName': $scope.buttonName, //ng-model of button
        'id': $scope.id //hidden id
        })
        .success(function() {
            $scope.message_color = "green";
            $scope.message = "Success.";
            $scope.name = null; //reset textbox values
            $scope.email = null; //reset textbox values
            $scope.buttonName = "Add"; //Change textbox value to Add
            $scope.displayUsers(); //Update the users table
        })
        .error(function() {
            console.log("Error");
        })

    }
    
}

$scope.updateData = function(id, name, email) {
    $scope.id = id;
    $scope.name = name;
    $scope.email = email;
    $scope.buttonName = "Update";
}

$scope.deleteData = function(id) {
    if(confirm("Are you sure you want to delete this record?"))
    {
        $http.post("delete.php", {'id': id})
        .success(function() {
            $scope.message_color = "blue";
            $scope.message = "Data deleted.";
            $scope.displayUsers();
        })
        .error(function() {
            console.log("Error");
        })
    }
    else
    {
        return false;
    }
}

});

mindthefrequency · Accepted Answer · 2022-04-18 04:03:56Z

I'm afraid that if you're relying on PHP and JS you'll have to resource to polling.

You can do this by using a front end request to poll the back end for changes, expecting a simple boolean response. This call should be made on a regular time interval determined by how urgently should the data be refreshed (1 second, 10 seconds, 1 minute...):

// define the method (does not need to be scoped) that will make the poll request:
var _pollChanges = function() {
    // make the request and pass the current number of available records in $scope.students as 'n'
    $http.get('poll.php', { data: 'n='+ $scope.students.length })
    .success(function(reponse) {
    // poll.php script should perform a match operation between the passed number 'n' and the number of records in the database, returning 'true' when the 2 values DO NOT match
       if (response == true) { 
           // the response equals 'true', meaning that new records are available to be loaded from the back end, so use the already defined method to fetch and display them in the front end:
           $scope.displayUsers()
        }
    });
    // use ngjs $timeout to generate a regular time interval to call _pollChanges
    $timeout(function() {
       _pollChanges();
    }, 5000);
}
// call the poll method to initiate the loop
_pollChanges();

Collectives™ on Stack Overflow

How to add AUTO REFRESH in ANGULAR JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related