current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
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 3 down vote favorite
3

My technology stack is -

  1. AngularJS
  2. Bootstrap
  3. Spring MVC
  4. Hibernate

What am I doing :

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

  1. Posting form Data via Angular Controller to a Spring Controller.
  2. Spring Controller -> DAO method -> DB is updated
  3. Spring Controller Returns "Y" or "N"
  4. Angular gets the Status Message and Reloads the Angular Model(A Json Array to populate the List of Items)
  5. 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

share|improve this question
    
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 Aug 8 '13 at 10:53

3 Answers 3

up vote 3 down vote accepted

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;
            });
        };
    });
share|improve this answer
    
Thanks a lot!! That idea helped –  Avinash Aug 8 '13 at 11:17
    
@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. –  agrublev Dec 2 '13 at 20:39
up vote 5 down vote

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

share|improve this answer
1  
Also note that $httpProvider.requestInterceptors is now $httpProvider.interceptors –  marcelj Mar 11 at 11:30
up vote 1 down vote

@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

share|improve this answer
    
tl;dr: $resource('/my/resource/:id', {id: "@id", cacheSlayer: new Date().getTime()}, { query: ... –  Pakman Jul 24 at 19:51

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.