EvR EvR - 4 months ago 20
Javascript Question

Angularjs' $http.get only executed once in IE11

I'm learning angularjs, and as a test project I'm polling a server that returns a list of active processes (their pids) and displaying these.

The client code looks like this:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="static/angular/angular.js"></script>
<script>
function ProcessCtrl($scope, $http, $interval) {
$scope.ReloadData = function() {
var result = $http.get("processdata", {timeout:1000});
result.success(function(data,status,headers,config) {
$scope.processes = data;
});
}
$scope.ReloadData();
var stop = $interval(function(){$scope.ReloadData()}, 1000);
}
</script>
</head>
<body ng-app>
<div ng-controller="ProcessCtrl">
Processes:
<ul>
<li ng-repeat="process in processes">
{{process.pid}} is running
</li>
</ul>
</div>
</body>
</html>


This works in Firefox and Chrome, but not quite in Internet Explorer 11.

All browsers execute the ReloadData method every second, but IE11 doesn't actually fetch the process data from the server. Firefox and Chrome do fetch the data every second. I can see this also in the output from my server, which logs every request.

All three browsers execute the code in
result.success
, but IE11 keeps reusing the old data it got the first time, where FireFox and Chrome use the newly fetched data.

I've checked the web console in IE11 for warnings or errors, but there are none.

Edit:
As the chosen answer suggested it was a caching problem. I have made the server add a 'cache-control' header to the response with the value 'no-cache'. This has solved the problem.

Answer

It's possible that the request is cached, as it is valid to cache GET requests. FF and Chrome probably have disabled caches, because of running dev tools or other reasons. You could append a timestamp as url query string "processdata?" + (new Date()).getTime() to see if it is a caching problem.

Prettier ways to prevent IE caching can be found here: Angular IE Caching issue for $http