current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 0 down vote favorite

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.

share|improve this question
    
You don't need $apply. The code is fine. – dfsq Oct 25 at 13:34
    
I've tried without $apply also. Changes are not reflecting. One thing I noticed is the view changes after I opened developer tools. – Bharath 2 days ago
    
where is your $interval service code? – Tarun Dugar 2 days ago
    
Tarun- Updated the question. Please check now. – Bharath 2 days ago
    
add a console.log in your GetTicketDetails function after $scope.ticketdetails = response; . See if it is updating everytime. – Tarun Dugar 2 days ago

1 Answer 1

up vote 0 down vote

After soo many hours of headache, 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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.