StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO$resource query() is not displaying the latest data after a server-side data modification was done
text
Body
copied!<p><strong>Scenario</strong></p> <p>The initial $resource query() retrieves an object containing 'A', 'B', & 'C' entries from the server.</p> <p>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.</p> <p>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.</p> <p><strong>Question</strong></p> <p>How can the $resource query() be done so that it can now go to the server and retrieve the latest list?</p> <p><strong>Research</strong></p> <p>The closest I found to an answer is here -> <a href="https://stackoverflow.com/a/17763081/2747683">How to refresh local data fetched using $resource service in AngularJS</a>, however, I'm not sure what the person meant by </p> <blockquote> <p>Adding a new instance to a list in the scope will refresh the list displayed on the page.</p> </blockquote> <p><strong>Some Code Snippets</strong></p> <p>Controller js:</p> <pre><code>angular.module('AutomationApp') .controller('FirstTryController', function ($scope, TestSuites) { $scope.testsuites = {}; TestSuites.query(function (response) { $scope.testsuites = response.TestSuites; }); }); </code></pre> <p>Service js:</p> <pre><code>angular.module('AutomationApp') .factory('TestSuites', function ($resource) { return $resource('/api/listTestSuites/:TestSuiteId', { TestSuiteId: '@TestSuiteId' }, { query: { method: 'GET', params: {}, isArray: false } }); }); </code></pre> <p>app.js:</p> <pre><code>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; } } }); }); </code></pre> <p><strong>Recap/Summary</strong></p> <p>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.</p> <p>Thank you in advance.</p> <p>**** ---- EDIT UPDATE ---- ****</p> <p>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.</p> <p><strong>RESOLVED</strong></p> <p>I went with what I found in this post <a href="https://stackoverflow.com/questions/16098430/angular-ie-caching-issue-for-http">Angular IE Caching issue for $http</a>. Thank you Pathsofdesign for supplying the link.</p> <p>I did the following change to make this work (<em>ADDED content inside params {}</em>):</p> <pre><code>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 } }); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload