$http.get cache false is not working

Question

i am using this code to call the method but it is still keeping the cache and not refreshing the data on the screen

(function () {
    'use strict';

    app.controller('categoryController', ['$http', '$location', 'authService', 'ngWEBAPISettings', categoryController]);

    ////categoryController.$inject = ['$location']; 

    function categoryController($http, $location, authService, ngWEBAPISettings) {
        /* jshint validthis:true */

        //Creating headers for sending the authentication token along with the system.
        var authheaders = {};
        authheaders.Authorization = 'Bearer ' + authService.getToken();

        //ForDate
        var d = new Date();

        var vm = this;
        vm.title = 'Category';
        ////debugger;

        ////Vadiable for Grid
        vm.Category = [];

        ////Vadiable for Adding
        vm.category = {
            CategoryID: 0,
            CategoryName:"",
            CreatedOn:d,
            UpdatedOn:d
        };
    ////Vadiable for Editing
    vm.editCategory = {};

    vm.getCategory = function () {
        ////debugger;

        ////authheaders.cache = false;


        var config = {
            headers: {
                'Authorization': authheaders.Authorization
            },
            cache: false,
        };


        //For Grid
        $http.get(ngWEBAPISettings.apiServiceBaseUri + "api/Categories", config)
        .then(function (respose) {
            //success
            ////debugger;
            angular.copy(respose.data, vm.Category);
            ////debugger;
            //var i = 2;
            ////debugger;
        }, function (response) {
            //failure
            ////debugger;
        }).finally(function () {
            ////debugger;
            //finally
        }
        );
    }

    vm.add = function ()
    {
        ////authheaders.Content-Type="application/x-www-form-urlencoded";
        ////debugger;

        vm.category.CreatedOn = d;
        vm.category.UpdatedOn = d;

        $http.post(ngWEBAPISettings.apiServiceBaseUri + "api/Categories", JSON.stringify(vm.category), { headers: authheaders })
        .then(function (repose) {
            ////success
            ////debugger;
            vm.Category.push(repose.data);
            alert('Category has been addded successfully');
            $('#addModal').modal('hide');
        }, function (response) {
            ////failure
            ////debugger;
            alert('An error has been occurred while adding the data');
        }).finally(function () {
            vm.category = {};
        });
    }

    vm.edit = function (id) {
        ///debugger;
        ////alert(id);
        $('#btnSubmit').html('Update');

        $("#btnSubmit").removeAttr("ng-click");
        $("#btnSubmit").attr("ng-click", "vm.edit()");

        $('#addModal').modal('show');

    }
    vm.delete = function (id) {
        ////debugger;
        alert(id);
    }


    activate();
    function activate() { vm.getCategory(); }

}
})();

here is the html

            <h1>{{vm.title}}</h1>

           <div id="addModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
                <div class="modal-dialog" role="document">
                 <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">Add Category</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3">Category Name</label>
                            <input class="form-control col-md-9" type="text" name="txtcategoryname" id="txtcategoryname" maxlength="200" ng-model="vm.category.CategoryName" required />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="btnSubmit" class="btn btn-primary" ng-disabled="!vm.category.CategoryName"  ng-click="vm.add()">Add</button>
            </div>
               </div>
              </div>
       </div>
              <div class="row">
    <div class="col-md-12 col-md-offset-10">
        <a href="" onclick="openAddModal()"><span class="fa fa-plus fa-200px"></span> Add New Record</a>

    </div>
</div>
<table class="table table-responsive table-hover">
    <thead>
        <tr>
            <th>Category Name</th>
            <th>Created On</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="cat in vm.Category">
            <td style="vertical-align:middle">{{cat.categoryName}}</td>
            <td style="vertical-align:middle">{{cat.createdOn | date:'dd-MMM-yyyy' }}</td>
            <td>
                <input type="button" class="btn btn-sm btn-primary" ng-click="vm.edit(cat.categoryID)" value="Edit" />
                <input type="button" class="btn btn-sm btn-primary" ng-click="vm.delete(cat.categoryID)" value="Delete" />
            </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    function openAddModal() {
        $('#addModal').modal('show');
        $('#btnSubmit').val('Add');
    }
</script>

here it is get called from

function activate() { vm.getCategory(); }

Were you able to get the debugger at the server side ? Did you mean its caching at client side or server side ? Please try not using Angular.copy once to see if this fixes — Thanigainathan, Mar 07 '16 at 19:35
Again, it's very unclear. activate() is called a single time from the controller. So how do you know that it uses or doesn't use the cache? And which cache are you talking about? The angular cache, or the browser cache? When you look at the network panel in the browser dev tools, do you see a request each time you click on the button triggering this $http call (assuming there is one somewhere), or not? — JB Nizet, Mar 07 '16 at 20:28
Try removing the hanging comma after the cache statement. var config = { headers: { 'Authorization': authheaders.Authorization }, cache: false, }; — Thanigainathan, Mar 07 '16 at 20:42
this link in stack overflow works for me http://stackoverflow.com/questions/16098430/angular-ie-caching-issue-for-http — rashfmnb, Mar 08 '16 at 14:07

score 0 · Answer 1 · answered Mar 07 '16 at 19:26

It does disable cache for all get requests.

myApp.config([
            // Diable IE Cache for $http.get requests
            '$httpProvider', function ($httpProvider) {
                // Initialize get if not there
                if (!$httpProvider.defaults.headers.get) {
                    $httpProvider.defaults.headers.get = {};
                }
                // Enables Request.IsAjaxRequest() in ASP.NET MVC
                $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';

                // Disable IE ajax request caching
                $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
            }
        ]);

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

According to this Angular link https://docs.angularjs.org/api/ng/service/$http caching is disabled by default. Check if you have a global setting somewhere for the cache and disable if needed.

Also try this solution by adding a datetime parameter in querystring. Destroying AngularJS $Http.Get Cache

edited May 23 '17 at 12:15

Community

1
1

answered Mar 07 '16 at 20:45

Thanigainathan

1,505
14
25

but for the get it is enabled as mentioned Only GET and JSONP requests are cached. – rashfmnb Mar 08 '16 at 19:59

score 0 · Accepted Answer · answered Mar 29 '16 at 18:53

this code works for me

app.config(['$httpProvider', function ($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};
    }

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

$http.get cache false is not working

3 Answers3