javascript - Unable to show spinning icon when button is clicked -


the below code gets data end , displays on browser on page load. when user clicks on reload data button , again has data backend , display on browser. issue when user clicks on reload data button, need show spinning icon , once data loaded replaced data. below code spinning icon showing somewhere down page, still occupying space of $scope.html old data showing blank , after blank space displaying spinner.how can show spinner user hits reload data button?

<table style="width:100%;height:80%;" ng-controller="loadingsamplectrl"> <tr> <td><button type="button" ng-click="loaddata()">reload data</button></td></tr> <tr ng-show="loading"> <td colspan="5" style="white-space: nowrap;text-align: center; font-size:36px;"><div class="loader"><i class="fa fa-spinner fa-spin" ></i> loading<span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span></div></td></tr>          <object-reloadable></object-reloadable>  </table>

js code:

app.directive('objectreloadable', function() { var link = function(scope, element, attrs) { var currentelement = element;  scope.$watch('pdfname', function(newvalue, oldvalue) {  if (newvalue !== oldvalue) {      scope.loading = false;      scope.pdfname = newvalue;       if(scope.pdfname.filepath == "undefined" ||  scope.pdfname.filepath==null){ scope.loading=true; } else { alert("in else"); scope.html = '<object style="width: 100%; height: 1200px;overflow-y: hidden; cursor:pointer;" type="application/pdf" data="' + scope.pdfname.filepath + '" ></object>'; /* scope.pdfname = newvalue;*/ scope.loading=false;  }var replacementelement = angular.element(scope.html);     currentelement.replacewith(replacementelement);     currentelement = replacementelement; } }); }; return { restrict: 'e', scope: false, link: link }; })  myapp.controller('loadingsamplectrl', function ($scope, filesservice) { $scope.loaddata = function () { $scope.loading = true; $scope.html=''; filesservice.fileread().then( function (response) {      $scope.filepathandname = response;        if(window.navigator.mssaveoropenblob){     $scope.iebrowser = true;     $timeout(function() {         $scope.pdfname = response;        }, 0);     } else {     $scope.iebrowser = false;     $scope.filepathandname = response;      $scope.loading = false;      } }, function (errresponse) {     $rootscope.showerror("internal error" + errresponse); });  } $scope.loaddata(); }); //service call _myfileservicefactory.fileread= function(){ var deferred = $q.defer(); var repurl = appurl+'/myfilesdata/generatedefectssummarypdf.form'; $http.get(repurl).then(     function (response) {         deferred.resolve(response.data);     },     function(errresponse){         console.error('error ' + errresponse);         deferred.reject(errresponse);     } ); return deferred.promise; }

ps: have assigned scope.html='' wherever required still when user clicks on reload button still showing blank space , down somewhere showing spinning icon.


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more