How to reload/refresh element with angular js

Question

I am new in Angular JS and learning it. I have a div and i want load data on startup with controller but i want reload it again when data has a new record.

index.html

<div id="third-content" ng-controller="IndexCtrl">
    <table id="table-class-detail" class="table table-atd table-responsive" ng-init="reloadElement('page001')">
    <tbody><tr><td>Loading...</td></tr></tbody>
    </table>
</div>

Angularjs Module :

var app = angular.module('app',['ngRoute','controller'])

.config(function($routeProvider){
    $routeProvider
    .when('/home',{
        controller: 'AtdCtrl'
    })
    .otherwise({
        //templateUrl: 'temp/404.html'
    })
})

controller :

angular.module('controller',[])

.controller('IndexCtrl', ['$scope', '$http', '$log', function($scope, $http, $log) {

    $scope.getCurrentClass = function($params){
        $interval(function(){
          $http.post('./reloadpage.php',{'temp':$params})
            .success(function(data){
                $("#table-class-detail tbody").html("<tr><td>Name:</td><td>"+data.name+"</td></tr> <tr><td>Code:</td><td>"+data.code+"</td></tr>");
            })
            .error(function(error){
                $log.error(error);
            })
        },1000);
    }
}])

reloadpage.php

$data = json_decode(file_get_contents("php://input"));
$temp = $data->temp;
$records = array();
$result = $this->currentClass($temp);
if(!empty($result)){
    $records = array('name' => $result->name,'code' => $result->code);
}else $records = null;
echo json_encode($records);

I follow tutorial form this site it's not working, i got an error ReferenceError: $interval is not defined

Can anyone help me ? How to reload/refresh element on table-class-detail tbody

Try to include your code with $interval with it so that we can see the problem clearer. — PSWai
– PSWai, Commented Dec 16, 2015 at 3:19

Magnus Buvarp · Accepted Answer · 2015-12-16 03:31:23Z

2

As Park said, you need to inject $interval in your controller or provider, but additionally, you shouldn't use jQuery to manipulate the DOM like that.

You should rather put something like this in your html:

<tbody ng-if="loading">
    <tr>
        <td>Loading...</td>
    </tr>
</tbody>
<tbody ng-if="!loading">
    <tr>
        <td>{{ name }}</td>
    </tr>
    <tr>
        <td>{{ code }}</td>
    </tr>
</tbody>

And something like this in your controller:

$scope.loading = true;
$scope.name = null;
$scope.code = null;

$scope.getCurrentClass = function($params){
    $http.post('./reloadpage.php', {'temp': $params})
    .success(function(data){
        $scope.name = data.name;
        $scope.code = data.code;
        $scope.loading = false;
    })
    .error(function(error){
        $log.error(error);
    });
}

answered Dec 16, 2015 at 3:31

Magnus Buvarp

9767 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PSWai Over a year ago

Upvote for mentioning usage of jQuery in controller

PSWai · Accepted Answer · 2015-12-16 03:44:42Z

1

Since the error mentioned $interval is not defined, it hints that you forgot to inject $interval into your controller/service. Something like this:

angular
  .module('controller',[])
  .controller('IndexCtrl', [
    '$scope', '$http', '$log', '$interval', // inject $interval here...
    function($scope, $http, $log, $interval) { // and here...

      $scope.getCurrentClass = function($params) {
        $interval(function() { // ... so that you can use it here
          $http
            .post('./reloadpage.php',{
              'temp': $params
            })
            .success(function(data) {
              $("#table-class-detail tbody").html("<tr><td>Name:</td><td>"+data.name+"</td></tr> <tr><td>Code:</td><td>"+data.code+"</td></tr>");
            })
            .error(function(error){
              $log.error(error);
            })
          }, 1000);
        }
      }])

PS: When you have finished the tutorial, pay a visit to John Papa's style guide on best practices on AngularJS :)

edited Dec 16, 2015 at 3:44

answered Dec 16, 2015 at 3:18

PSWai

1,18813 silver badges32 bronze badges

7 Comments

Febry Fairuz Over a year ago

still have some error ReferenceError: $interval is not defined

PSWai Over a year ago

@FebryFairuz did you inject it properly? It should be injected in the function too

Febry Fairuz Over a year ago

i inject it, but now i got error like this TypeError: $interval is not a function

PSWai Over a year ago

@FebryFairuz that's strange. Check my updated answer for a clearer picture (you have to inject into two places). Otherwise, could it be $interval is also being used in other controller?

Febry Fairuz Over a year ago

i follow your new update, there's no error but does not display any thing. *blank

|

user5510053 · Accepted Answer · 2015-12-16 03:32:16Z

0

Somewhere in the controller '$interval' parameter must be used for which you have to pass $interval into your controller angular.module('myCtrl', function($scope, $interval)

answered Dec 16, 2015 at 3:32

user5510053

112 bronze badges

Collectives™ on Stack Overflow

How to reload/refresh element with angular js

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related