How to Prevent Caching in IE8 when using AngularJS Models

Question

My technology stack is -

AngularJS
Bootstrap
Spring MVC
Hibernate

What am I doing :

There is a list of Items on which I am doing CRUD (Create, Read, Update and Delete)

Posting form Data via Angular Controller to a Spring Controller.
Spring Controller -> DAO method -> DB is updated
Spring Controller Returns "Y" or "N"
Angular gets the Status Message and Reloads the Angular Model(A Json Array to populate the List of Items)
Same with Update and Delete

My objective is to achieve real-time data manipulation without page reload.

This works fine in Chrome. However, IE can not detect the Model Change. It keeps displaying the data prior to addition/updation/deletion (from its cache). Only after I clear the cache manually, am I actually able to see the changed Model.

Need help on how to resolve this problem with IE8 and above.

P.S. I have already tried setting the meta headers

Can you see the cache headers for the get request being made in ie8 in web developer for IE. Also are GET returning status code 200 or 304 or no request is going at all on update. — Chandermani
– Chandermani, Commented Aug 8, 2013 at 10:53

JQuery Guru · Accepted Answer · 2013-08-08 10:32:28Z

5

You can set

"No-Cache headers to the response on server side"

var AppInfrastructure = angular.module('App.Infrastructure', []);

and in Angularjs you can write interceptor below is the sample code:

AppInfrastructure
    .config(function ($httpProvider) {
        $httpProvider.requestInterceptors.push('httpRequestInterceptorCacheBuster');
    })    
    .factory('httpRequestInterceptorCacheBuster', function () {
        return function (promise) {
            return promise.then(function (request) {
                if (request.method === 'GET') {
                    var sep = request.url.indexOf('?') === -1 ? '?' : '&';
                    request.url = request.url + sep + 'cacheSlayer=' + new Date().getTime();
                }

                return request;
            });
        };
    });

answered Aug 8, 2013 at 10:32

JQuery Guru

6,9631 gold badge35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

agrublev Over a year ago

@Avinash seems you also only used the idea but not the exact solution, wasn't sure what you meant until i tried it, and had to do different implementation myself to make it work.

dillip · Accepted Answer · 2014-02-11 03:38:27Z

5

same as what Jquery Guru mentioned above, but it is config in newer version of angular

.factory('noCacheInterceptor', function () {
        return {
            request: function (config) {
                console.log(config.method);
                console.log(config.url);
                if(config.method=='GET'){
                    var separator = config.url.indexOf('?') === -1 ? '?' : '&';
                    config.url = config.url+separator+'noCache=' + new Date().getTime();
                }
                console.log(config.method);
                console.log(config.url);
                return config;
           }
       };
});

you should remove console.logs after verifying

edited Feb 11, 2014 at 3:38

answered Jan 23, 2014 at 20:57

dillip

1,84218 silver badges16 bronze badges

1 Comment

marcelj Over a year ago

Also note that $httpProvider.requestInterceptors is now $httpProvider.interceptors

agrublev · Accepted Answer · 2013-12-02 20:43:53Z

1

@Avinash seems you also only used the idea but not the exact solution, wasn't sure what you meant until i tried it, and had to do different implementation myself to make it work.

Anyways I decided to share my findings with the rest of the world so maybe to save someone else some time.

I tried to implement the above code 1 for 1... the first obvious issue I ran into is that the request parameter passed into the promise has an object structure inside that is different than what is shown above, to get the .method and .url i needed to first go into .config. So it was request.config.method.

But that wasn't the main problem, my problem was that even after implementing this the final url called did not have this cacheSlayer appended to it.

My solution :) when creating a $resource you pass in (url, additional settings, method). Inside the additional settings I passed in {'cacheSlayer':new Date().getTime()} and this way it did start adding this to my resource url's.

Hope this helps

answered Dec 2, 2013 at 20:43

agrublev

7681 gold badge8 silver badges22 bronze badges

1 Comment

Pakman Over a year ago

tl;dr: $resource('/my/resource/:id', {id: "@id", cacheSlayer: new Date().getTime()}, { query: ...

Collectives™ on Stack Overflow

How to Prevent Caching in IE8 when using AngularJS Models

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related