This topic contains 1 reply, has 2 voices, and was last updated by Sean Sean 2 years, 6 months ago.

AngularJS how to show loading animation when using ajax


  • benck
    Participant

    Member Reply #8586

    http://keenthemes.com/preview/metronic/theme/admin_4_rounded/portlet_ajax.html

    I’m using AngularJS version of admin 4 but I found the portlet ajax sample code in the above link. I’m now loading ajax content through my controller and want to update the portlet already built.

    How could I make the loading animation in view by code (jQuery?) and terminate the animation once the ajax loads. Thank you!

    The code should look like this:

     

     

     

     

     

     

     

    MetronicApp.controller(‘ListController’, function($rootScope, $scope, $http, $timeout, $log, $resource) {

     

    $scope.api = $resource(‘/ajax/ajax.php’, {action: ‘get_all_accounts’});

     

    // start animation here

    // $(…).startAnimation()??

     

    $scope.doSearch = function(){

    $scope.api.get({}, function(result){

    // end animation here

    // $(….).endAnimation()???

     

    // work around with the result returned

    });

    }

    }

     

    <div class=”portlet light bordered”>

    <div class=”portlet-title”>

    <div class=”caption font-green-sharp”>

    <span class=”caption-subject bold uppercase”>Create Something</span>

    </div>

    <div class=”tools”>

    </div>

    </div>

    <div class=”portlet-body”>

    …. some body here to be ajax loaded

    </div>

    </div>

     

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #8599

    Hi :),

    You can use below code to show and hide a loading bar for a content:

    Show loading:
    App.blockUI({
    target: ‘#your_portlet_body’ // ID of your portlet body part
    });

    Hide loading
    App.unblockUI(‘#your_portlet_body’);

    More examples you can find here: http://keenthemes.com/preview/metronic/theme/admin_1/ui_blockui.html

    If you need any further help please let us know.

    Thanks.

Tagged: 

You must be logged in to reply to this topic.