1

Scenario

The initial $resource query() retrieves an object containing 'A', 'B', & 'C' entries from the server.

The user then goes to a different Add Entry Screen and adds a 'D' entry. This Screen is done via a server-side process not via a client-side process.

The user now goes back to the first screen and re-queries the $resource query(), however, this is STILL showing the object containing 'A', 'B', & 'C' entries. The 'D' is not in the object retrieved by $resource.

Question

How can the $resource query() be done so that it can now go to the server and retrieve the latest list?

Research

The closest I found to an answer is here -> How to refresh local data fetched using $resource service in AngularJS, however, I'm not sure what the person meant by

Adding a new instance to a list in the scope will refresh the list displayed on the page.

Some Code Snippets

Controller js:

angular.module('AutomationApp')
.controller('FirstTryController', function ($scope, TestSuites) {
    $scope.testsuites = {};

    TestSuites.query(function (response) {
        $scope.testsuites = response.TestSuites;
    });
});

Service js:

angular.module('AutomationApp')
.factory('TestSuites', function ($resource) {
    return $resource('/api/listTestSuites/:TestSuiteId',
        { TestSuiteId: '@TestSuiteId' },
        {
            query: {
                method: 'GET',
                params: {},
                isArray: false
            }
        });
});

app.js:

var app = angular.module('AutomationApp', ['ngRoute', 'ngResource']);

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/list', {
            templateUrl: 'app/views/firsttry.html',
            controller: 'FirstTryController',
            resolve: {
                delay: function ($q, $timeout) {
                    var delay = $q.defer();
                    $timeout(delay.resolve, 500);
                    return delay.promise;
                }
            }
        });
});

Recap/Summary

On the initial $resource query(), it is retrieving the latest data as expected. However, if the data in the server is modified by some server side process, and the user goes back and reexecutes the $resource query(), the data retrieved does not reflect the newly modified server side data.

Thank you in advance.

**** ---- EDIT UPDATE ---- ****

It appears to be IE 8 related. This code works with Chrome and Mozilla but no with IE 8. Any idea where to go from here? Thank you again.

RESOLVED

I went with what I found in this post Angular IE Caching issue for $http. Thank you Pathsofdesign for supplying the link.

I did the following change to make this work (ADDED content inside params {}):

Service js:

angular.module('AutomationApp')
.factory('TestSuites', function ($resource) {
    return $resource('/api/listTestSuites/:TestSuiteId',
        { TestSuiteId: '@TestSuiteId' },
        {
            query: {
                method: 'GET',
                params: { 'foobar': new Date().getTime() },
                isArray: false
            }
        });
});
Community
  • 1
  • 1
Buitrago
  • 21
  • 4
  • Can you narrow the problem to server-side or client-side? Meaning: this could be caused by the browser caching the data (`query()` is GET I think, so elligible for caching). Can you check the network with Firebug (or equivalent) and verify that the request is actually sent to the server and not retrieved from the cache? Then a breakpoint in the server-side code to see it is actually called, that it actually *does* store D (check with the DB too), and what it fetches from the DB the second time `query()` is called. – Nikos Paraskevopoulos Dec 27 '13 at 17:28
  • Appears to definitely be a client-side issue. The DB has the correct information at all times. However, thanks to your comment, I just realized that this is happening with IE only?! At home I use Chrome, but unfortunately, for my job, I have to use IE 8. This same code worked on Chrome and I just installed Mozilla at work (can't install Chrome) and it worked fine with Mozilla as well?! So this definitely seems to be an issue with IE 8. Any idea where to go from here? – Buitrago Dec 27 '13 at 17:42
  • Look at the network tab in chrome, is the server being called on subsequent requests? It could be caching the request and just giving you back the cached results without actually going to the server. – Fourth Dec 27 '13 at 17:48
  • Yes, this is an IE caching problem... as the issue has been narrowed down to this, I am currently investigating how to get this fixed. Will post fix after I figure it out (hopefully). – Buitrago Dec 27 '13 at 18:12
  • Maybe this will be of use? http://stackoverflow.com/questions/16098430/angular-ie-caching-issue-for-http – Pathsofdesign Dec 27 '13 at 18:13
  • Maybe an HTTP interceptor adding the cache-breaking date may help, as described [here](http://docs.angularjs.org/api/ng.$http). Or you may claim that, since Microsoft support for IE8 is ending in a few months, you will not support this specific "browser" (wishful thinking?) – Nikos Paraskevopoulos Dec 27 '13 at 21:19
  • @Pathsofdesign - Hey, I'm going with what looks like a HACK as it worked! (adding foobar to params). Thank you for the link! – Buitrago Dec 27 '13 at 21:28
  • @NikosParaskevopoulos - Appreciate your feedback. I'll look at that link's solution when I get a chance, but for now, I'm glad something is working. About IE8, I work for a HUGE company (over 100K employees), so IE8 is pretty much written in stone around here. – Buitrago Dec 27 '13 at 21:45

0 Answers0