Refresh html table data at regular interval using Angularjs

Question

I'm trying to refresh the html table data for every ten seconds by invoking GetTicketDetails method using $interval service, but my view is not reflecting the changes. Below is my Java Script Code section for binding data:

$scope.GetTicketDetails = function () {
    $http.get(CMSRestServiceURL+"getalltickets")
               .success(function (response) {                      
                   $scope.ticketdetails = response;                                              
               });                  
};

Below is $interval code:

$interval(function () {
    $scope.GetTicketDetails();        
}, 10000);

Below is my html:

<table id="tblticketdetails" class="table table-condensed table-bordered ticketdetailstablestyle">
                        <thead>
                            <tr>
                                <th class="tableheadingstyle">Ticket ID</th>
                                <th class="tableheadingstyle">Created DateTime</th>
                                <th class="tableheadingstyle">Customer ID</th>
                                <th class="tableheadingstyle">Subject</th>
                                <th class="tableheadingstyle">Description</th>
                                <th class="tableheadingstyle">Status</th>
                                <th class="tableheadingstyle">Edit Ticket</th>
                            </tr>
                        </thead>
                        <tbody class="searchable">
                            <tr ng-repeat="ticket in ticketdetails">
                                <td>{{ ticket.TicketID }}</td>
                                <td>{{ ticket.CreatedDateTime }}</td>
                                <td>{{ ticket.CustomerID }}</td>
                                <td>{{ ticket.Subject }}</td>
                                <td>{{ ticket.Description }}</td>
                                <td ng-switch on="ticket.Status">
                                    <span class="labelstatus label-danger" ng-switch-when="open">Open</span>
                                    <span class="labelstatus label-info" ng-switch-when="pending">Pending</span>
                                    <span class="labelstatus label-primary" ng-switch-when="work in progres">Work in Progress</span>
                                    <span class="labelstatus label-success" ng-switch-when="resolved">Resolved</span>
                                    <span class="labelstatus label-warning" ng-switch-when="not resolved">Not Resolved</span>
                                    <span class="labelstatus label-warning" ng-switch-when="violated">Violated</span>
                                </td>
                                <td>
                                    <button class="btnEdit btn-warning" ng-click="Edit(ticket)">Edit</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

I've tried $scope.$apply() and $scope.$digest(). But after that also, the changes didn't reflect in my view. Any help is appreciated. Thanks in advance.

I've tried without $apply also. Changes are not reflecting. One thing I noticed is the view changes after I opened developer tools. — Bharath
– Bharath, Commented Oct 25, 2015 at 13:38
add a console.log in your GetTicketDetails function after $scope.ticketdetails = response; . See if it is updating everytime. — Tarun Dugar
– Tarun Dugar, Commented Oct 25, 2015 at 13:51

Bharath · Accepted Answer · 2021-05-12 13:37:49Z

1

After long hours, I figured out the problem. I checked the application in chrome and the data was updating instantly. Then I understood that this was a problem related only to IE browser. IE stores the $http.get request in cache and renders the data from cache next time for the same request, instead of populating the updated data.

Adding the below section to your angular app will resolve the problem:

app.config(['$httpProvider', function ($httpProvider) {
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
}        
//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

Thanks to cnmuc: Angular IE Caching issue for $http

edited May 12, 2021 at 13:37

answered Oct 25, 2015 at 17:57

Bharath

1951 gold badge2 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Refresh html table data at regular interval using Angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related