JS:
function OrderFormController($scope, $http) {
$scope.sampleJSON = [];
$scope.sampleJSONDuplicates = [];
oboe('/getPMDResultsByDateAndSeverity')
.done(function(data) {
$scope.sampleJSON.push(data.pmdStructureWrapper);
$scope.sampleJSONDuplicates.push(data.pmdDuplicates);
})
.fail(function() {
console.log('error');
});
}
html:
<body ng-app ng-controller="OrderFormController">
<div class="splash" ng-cloak="">
<h2>Please wait, Loading Review Result</h2>
</div>
<div class="col-md-12 col-lg-12" ng-cloak="">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1default" data-toggle="tab">Classes</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1default">
<ul class="col-md-12 col-lg-12">
<li ng-click="showErrorDetails(key)" class="col-sm-12 col-md-4 col-lg-4 eachClassCell"
ng-repeat='(key,value) in sampleJSON'>
<div ng-if="key.indexOf('.cls') > -1">
<div title="{{key}}" class="classNameLabel">{{key}}</div>
<div title="Error count" class="errorContainer">
<span class="errorCount">{{value.pmdStructures.length}}</span>
<span class="errorMeter"
ng-repeat="eachClass in value.pmdStructures | limitTo: 10"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<form>
</form>
<footer>
<p>Salesforce Free Code Review, Copyright © 2017</p>
<p>Contact Us : <a href="mailto:****">Mail Us</a>
</p>
</footer>
<script type="application/javascript">
$(function() {
$('.panel-body li').each(function() {
if($.trim($(this).text()) === "") {
$(this).hide();
}
});
});
</script>
</body>
the page does not render anything. Is there something I am missing? I know the page renders before the result, but how do I re-render it? I have to keep it async because when I host my app in heroku the call gets timed out(30000ms),if I use async false from ajax:
var jsonData = $.ajax({
url: "/getPMDResultsByDateAndSeverity",
dataType: "json",
crossDomain: true,
async: false
}).responseText;
Also it keeps running out of heap memory as when I use async false. I have modified the server side to perform at optimal level. When using async false : c.****.algo.MetadataLoginUtil : Total Time Taken 26825
After using async true : which I thing oboe.js internally does:
c.****.algo.MetadataLoginUtil : Total Time Taken 6321
The above is the time taken is for getting response from server side.
You need to call
$scope.$apply()at the end ofdone().Because the call is async and oboe does not hook into angular's scope framework, angular will not know that the page needs to be re-rendered after you have received the ajax response.
$scope.$apply()tells Angular that the scope has changed and to therefore refresh the page display. This question and answer explains this in more detail.