AngularJS not displaying loader during AJAX request

Question

AngularJS not displaying loader during AJAX request

While utilizing ajax requests with $http, there seems to be a delay due to the server operation taking longer than expected. I have implemented a loader to display while processing the request, but unfortunately it is not showing up on the page. Even after trying various methods, the issue persists.

Index.html

<body ng-app="app">

    <!-- loader, can be used on multiple pages-->
    <div class="loading loader-quart" ng-show="isLoading"></div>

<!--         my logic       --> 

</body>

addCtrl.js

//function for sending attributes to server using service
    $scope.add = function () {
        if ($scope.Option == 'newInstance')
            $scope.singleObject.FK_Name = 'MetisEmptyTemplate';
        $rootScope.isLoading = true;
        var featuresList = websiteService.getUpdatedTree($scope.treeDataSource);
        var formData = new Website("", $scope.singleObject.Name, $scope.singleObject.DisplayName, $scope.singleObject.Description, $scope.singleObject.State, "", $scope.singleObject.FK_Name, $scope.singleObject.Email, featuresList);

        websiteService.addwebsite(formData);
        $rootScope.isLoading = false;
    }

websiteService.js

//service for adding website
    this.addwebsite = function (website) {
        $http({
            method: 'POST',
            url: $rootScope.url + 'Add',
            data: JSON.stringify(website),
            contentType: 'application/json'
        }).success(function (data) {
            alert(data);
        }).error(function (data, status, headers, config) {
            //alert(data);
        });
    }

After setting isLoading as "true" at the start and then toggling it to "false" once the request is complete, the loader should appear correctly. What could be causing the code to malfunction?

javascript angularjs ajax

Answer 1

Answer №1

Your websiteServices code is designed to run asynchronously, meaning that the loader will appear and disappear quickly.

To properly handle asynchronous code in the controller, you need to return a promise from the service and include the hiding of the spinner within a callback function using .then().

Service:

this.addwebsite = function (website) {
    var deferred = $q.defer();
    $http({
        method: 'POST',
        url: $rootScope.url + 'Add',
        data: JSON.stringify(website),
        contentType: 'application/json'
    }).success(function (data) {
        alert(data);
        deferred.resolve(data);
    }).error(function (data, status, headers, config) {
        //alert(data);
        deferred.reject(data);
    });
    return deferred.promise
}

Controller:

websiteService.addwebsite(formData).then(function(){
    $rootScope.isLoading = false
});

Answer 2

Your websiteServices code is designed to run asynchronously, meaning that the loader will appear and disappear quickly.

To properly handle asynchronous code in the controller, you need to return a promise from the service and include the hiding of the spinner within a callback function using .then().

Service:

this.addwebsite = function (website) {
    var deferred = $q.defer();
    $http({
        method: 'POST',
        url: $rootScope.url + 'Add',
        data: JSON.stringify(website),
        contentType: 'application/json'
    }).success(function (data) {
        alert(data);
        deferred.resolve(data);
    }).error(function (data, status, headers, config) {
        //alert(data);
        deferred.reject(data);
    });
    return deferred.promise
}

Controller:

websiteService.addwebsite(formData).then(function(){
    $rootScope.isLoading = false
});

Answer 3

Answer №2

    function addMliveResponse(data){
        var post=$q.post();
        var url='/mlive-portlet/rest/mliveResponseService/addmLiveResponse';
        httpRequest(url,data).then(function(result){
                post.resolve(result.data);
        },function(error){
            post.reject(error.data);
        })
        return post.promise;
    }

Answer 4

    function addMliveResponse(data){
        var post=$q.post();
        var url='/mlive-portlet/rest/mliveResponseService/addmLiveResponse';
        httpRequest(url,data).then(function(result){
                post.resolve(result.data);
        },function(error){
            post.reject(error.data);
        })
        return post.promise;
    }

Answer 5

Answer №3

If you need to handle requests, I believe utilizing an interceptor is the most efficient way to manage showing and hiding a loader.

In this code snippet, I am employing a loader service to turn on and off the loader.

For example:

// http.config.js file
export function httpConfig($httpProvider, AuthInterceptProvider) {
  'ngInject';
  AuthInterceptProvider.interceptAuth(true);

  // created for showing loader
  $httpProvider.interceptors.push(function (loaderService, $q) {
    'ngInject';
    return {
      'request': function (config) {
        loaderService.switchLoaderModeOn();
        return config;
      },

      'requestError': function (rejection) {
        loaderService.switchLoaderModeOff();
        return $q.reject(rejection);
      },

      'response': function (response) {
        loaderService.switchLoaderModeOff();
        return response;
      },

      'responseError': function (rejection) {
        loaderService.switchLoaderModeOff();
        return $q.reject(rejection);
      }
    };
  });
}

// in your module.js file
import {httpConfig} from './config/http.config';

.config(httpConfig)

Answer 6

If you need to handle requests, I believe utilizing an interceptor is the most efficient way to manage showing and hiding a loader.

In this code snippet, I am employing a loader service to turn on and off the loader.

For example:

// http.config.js file
export function httpConfig($httpProvider, AuthInterceptProvider) {
  'ngInject';
  AuthInterceptProvider.interceptAuth(true);

  // created for showing loader
  $httpProvider.interceptors.push(function (loaderService, $q) {
    'ngInject';
    return {
      'request': function (config) {
        loaderService.switchLoaderModeOn();
        return config;
      },

      'requestError': function (rejection) {
        loaderService.switchLoaderModeOff();
        return $q.reject(rejection);
      },

      'response': function (response) {
        loaderService.switchLoaderModeOff();
        return response;
      },

      'responseError': function (rejection) {
        loaderService.switchLoaderModeOff();
        return $q.reject(rejection);
      }
    };
  });
}

// in your module.js file
import {httpConfig} from './config/http.config';

.config(httpConfig)

AngularJS not displaying loader during AJAX request

Answer №1

Answer №2

Answer №3

Similar questions

Encountering an error when setting up a React-TypeScript ContextAPI

"Mastering the art of traversing through request.body and making necessary updates on an object

Using React to integrate Zurb Foundation's slider by binding moved.zf.slider

Tips for transferring information to an input field's value

What advantages can I expect for my client-rendered pages with Gatsby's Client Side Routing?

Limiting the size of image uploads in AWS S3

What is the best way to send a prop to my home route following a redirect?

The presence of certain characters is leading to problems in the console

Customizing the Switch component individually for each item fetched from an API in React Native

Unlocking the Power of jQuery's toggle Method for Dynamic Functionality

A function that handles HTTP request and response

Leveraging JavaScript event handlers within a progress wizard located within an update panel

Cross-domain AJAX/XDomainRequest being sent to a web service

The event listener for 'annotations.create' in the PSPDFKIT instance does not include the required annotation type

Encountering a script error when upgrading to rc4 in Angular 2

Binding an event to an Angular 2 component directly within its selector code

What do you call the syntax %< ... >%?

Is there a way to efficiently process multipart/formdata, application/json, and text/plain within a single Express handler?

Ways to execute the pdf.js node demonstrations?

JsDoc presents the complete code instead of the commented block