current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 5 down vote favorite

Problem

When using the GET request from a $resource, the response on success is an empty array in Microsoft Internet Explorer 9 only.

Tests

Scenarios of Success:

  • Using FF or Chrome, the GET request returns an array of data in both development and local environments.
  • IE9 accessing a local server, the "GET" request returns an array of data.

Scenario of failure:

  • IE9 accessing the development server, an empty array is returned.

Debugging steps:

  • In IE9 accessing the development server:
    • typing in the URL to the REST API will successfully return an array of data. ✓
    • stepping through the debugger verifies that the data sent to the server are numbers and of the correct value. ✓
    • POSTing data to another $resource works fine - data is persisted in the database and is correct. ✓
    • stepping through the debugger shows an empty array in the success method. ✗

Results

  • REST API is working since a direct request returns data
  • Angular should be working, since results are returned in FF and Chrome

Questions

  • Is there any other tips to debug this issue?
  • What could be the cause of this?
  • Is there any IE9 specific issues with Ajax requests?

Possible Related Resources

Code

Resource

var AnswerSetBySubjectByForm = function($resource) {
    return $resource('/rest/answerset/subject/:idSubject/form/:idForm',
            { idSubject : '@idSubject', idForm : '@idForm'},
            {'get' : {method:'GET', isArray:true}}
        );
};

Controller

var AnswerSetController = function($scope, AnswerSetBySubjectByForm) {

...

  $scope.$on('loadAnswerSets', function(e, idSubject, idForm) {
    if (angular.isNumber(idSubject) && angular.isNumber(idForm)) {
      AnswerSetBySubjectByForm.get({ 
        idSubject : idSubject, 
        idForm : idForm
      }, function(answerSets) {
        /* answerSets is an empty array in IE9 only */
        $scope.answerSets = angular.copy(answerSets);
      });
    }
  });

...

Application

...

app                
  .factory('AnswerSetBySubjectByForm', 
        ['$resource', AnswerSetBySubjectByForm])
  .controller('AnswerSetController', 
        ['$scope', 'AnswerSetBySubjectByForm', AnswerSetController])

...

Any help in debugging this would be greatly appreciated! Thanks in advance.

share|improve this question
    
possible duplicate of AJAX problem in IE9? –  Pete Apr 4 '14 at 19:31
    
Turns out the problem was caching in MSIE9. :( –  Pete Apr 4 '14 at 19:36

1 Answer 1

up vote 2 down vote accepted

Do this in your angular code to prevent GET requests being cached

app.config(['$httpProvider', function ($httpProvider) {
    //Disable caching and make sure the call is made for each GET request.
    //Especially for IE, disable ajax get request caching
    $httpProvider.defaults.headers.get = $httpProvider.defaults.headers.get || {};
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);
share|improve this answer
    
Quick question, would you know if there's a difference between setting the headers at the server vs. setting the headers at the client? Is there a preference for choosing one over the other in terms of security and/or performance? –  Pete Apr 8 '14 at 13:48
    
I don't think it matters either way. –  Narayana Apr 9 '14 at 8:27

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.