CODEWITHSUNDEEP
javascriptphpjqueryangularjs
AngularAngularAngular
AngularAngularAngular

Reputation: 3769

Angularjs Showing Loading spinner

Here is my ajax request,

I wanted to show the loading spinner. I refered here but i am not clear in it.

I just wanted to show the spinner during the $http.post and hide after the post is done.

Something like angular.element('#mydiv').show() and angular.element('#mydiv').hide() inside the call. In which place shall i give that to show the #mydiv during the post was in progress.

Here is my call

$scope.doVerify={email:'',password:''};
    $scope.doVerify = function () 
    {
     email = $scope.verify.useremail;
     password = $scope.verify.password;
     $scope.data.show = false; 
     $http.post('VerifyUser', { email: email, password: password}).then(function (results) 
     {
     $scope.data.show = true
     if(results.data=='success')
     {
     $location.path('registration');
     }
     else
     {
     $scope.data.msg = 'Incorrect Password'
     }
     });
    };

Where shall i put the angular.element('#mydiv').show() and angular.element('#mydiv').hide() to the loader ?

Upvotes: 0

Views: 914

Answers (4)

Rani Das
Rani Das

Reputation: 19

Here How you can show the spinner in your code. show or hide your img/icon whre the $scope.prograssing var sets. 

$scope.doVerify={email:'',password:''};
        $scope.doVerify = function () 
        {
         email = $scope.verify.useremail;
         password = $scope.verify.password;
         $scope.data.show = false; 

    $scope.sendAjax = function() {
    $scope.prograssing = true; // show spinner here
    $http.post('VerifyUser', { email: email, password: password}).then(function (results) 
             {
             $scope.data.show = true
             if(results.data=='success')
             {
             $location.path('registration');
    $scope.prograssing = false;        // hide spinner when successful
             }
             else
             {
             $scope.data.msg = 'Incorrect Password';
    $scope.prograssing = false;        // hide spinner when unsuccessful
             }
             });
           };
$scope.sendAjax();
       };

Upvotes: 1

Vaibhav Pachauri
Vaibhav Pachauri

Reputation: 2671

angular.element('#mydiv').show() needs to go inside the definition of your interceptor. Interceptors are pushed inside the config block of the angular module. Exactly the way the it has been done here.

angular.element('#mydiv').hide() needs to go inside the response of the $http service(inside the 'then' block).

The example you are referring is doing it exactly the way it should.

Upvotes: 1

prototype
prototype

Reputation: 3313

I think that the best solution to do this is to add the spinner in the HTML like so:

<div ng-show="spinnerVisibility" class="spinner></div>

and then control the spinnerVisibility variable in the controller before/after making a post. Example:

$scope.spinnerVisibility = true;
$http.post('VerifyUser', { email: email, password: password}).then(function (results) {
    $scope.spinnerVisibility = false;
});

Upvotes: 1

Muhammad Reda
Muhammad Reda

Reputation: 27023

angular.element('#mydiv').show() needs to go before you make $http call and angular.element('#mydiv').hide() should go in success and error callbacks.

angular.element('#mydiv').show(); // show loading spinner
$http.post('VerifyUser', { email: email, password: password}).then(function (results) {
    angular.element('#mydiv').hide(); // hide loading spinner
});

Upvotes: 1

Related Questions