Show loader on processing script function and not on window refresh - HTML

Question

I have the following div:

<div id="main Div" ng-controller="nameController">
   <div class="jumbotron" style="width: 900px; background:transparent !important; float:left; margin-top: -75px; padding-bottom: 0px; padding-left: 40px; ">
      <form class="form-horizontal" id="uploadForm">
         <div class="form-group mb-3 d-lg-flex" style="margin-left:-50px;">
            <div class="col-md-12">
               <input id="upload" type="file" class="form-control" required="true" style="width:70%; margin-left:150px" placeholder="Upload file" file-model="uploadedFile" accept=".csv"/>
            </div>
            <div class="form-group" aria-label="file upload">
               <input type="submit" class="btn btn-primary" ng-click="doUploadFile()" value="Upload" style="margin-left:-50px;"/>
            </div>
         </div>
      </form>
   </div>
</div>

Which will call the following script on submit:

$scope.doUploadFile = function() {

    var file = $scope.uploadedFile;
    var url = "/uploadfile";

    var data = new FormData();
    data.append('uploadedfile', file);

    var config = {
        transformRequest: angular.identity,
        headers: {
            'Content-Type': undefined
        }
    }

    $http.post(url, data, config)
        .then(
            function(response) {
                $rootScope.nameData = response.data;
            });
};

and display this div:

<div id="alert_success" role="alert" >
    <img src="images/Success.png" width="30" height="30" style="margin-left: 5px;" alt="" hspace="5"/>
    <strong>Processed</strong> : Refer to Notes column for Status
</div>

I already have a loader, which will be loading only on page refresh.

$(window).on('load', function() {
    $('#loading').hide();
});

I instead want to apply the loader when the script is processing the function and not on windows loader.

Can someone help how to achieve this?

score 0 · Answer 1 · answered Nov 18 '18 at 11:00

jQuery has APIs to handle such cases. ajaxStart/ajaxStop functions will handle before and after calls, respectivelly..

You can configure it pretty easily:

$(document)
  .ajaxStart(function () {
    //start loader
  })
  .ajaxStop(function () {
    //stop loader
  });

For more information, check the documentation for ajaxSetup() and this topic for a broader discussion

Show loader on processing script function and not on window refresh - HTML

1 Answers1