Question

In my web app while I am updating some data I need to show some loading spinning gif in the web page.
This is my code.

This is my html code

<img src="../../../../Content/images/submit-gif.gif" class="hidegif" data-bind="visible: isWaiting"/>
<button data-bind="click: createNew">Save</button>

In my knockoutjs model I have this

self.isWaiting = ko.observable(false);

self.createNew = function () {
            this.isWaiting(true);
                        $.getJSON("/Admin/Material/GetFolders", function (allData) {
                            this.isWaiting(true);
                            var mappedFolders = $.map(allData, function (item) { return new Folder(item); });
                            self.folders(mappedFolders);
                            this.isWaiting(false);
                        }).success(function () { this.isWaiting(false); }).error(function () { }).complete(function () { this.isWaiting(false); }); ;
        };

I have property called isWaiting. Before I call the server I am setting it to true. In completion and successive method I am setting it back to false.
So based on that my spinning wheel should appear and disappear.

But this is not working.

Thanks In Advance

Answer 1

this will have another context inside the createNew and callback functions. You should use self instead of this for accessing view model’s property:

self.createNew = function () {
    self.isWaiting(true);
    $.getJSON("/Admin/Material/GetFolders", function (allData) {
        self.isWaiting(true);
        var mappedFolders = $.map(allData, function (item) { return new Folder(item); });
        self.folders(mappedFolders);
        self.isWaiting(false);
    }).success(function () { 
        self.isWaiting(false); 
    }).error(function () {})
    .complete(function () {   
        self.isWaiting(false); 
    }); 
};