+ Start a Discussion
Manjunath reddy 25Manjunath reddy 25 

when vf page is rerendered not able to see the values reflectin on vf page, but when manually refreshed able to see the values reflecting on the page, can any one help me to fix this issue

<apex:page controller="costController"  action="{!updateitems}" showHeader="false" id="pageId">
<apex:stylesheet value="{!URLFOR($Resource.Apttus_Config2__ngCPQ, '/aptCPQUI/assets/stylesheets/angular-material.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.Apttus_Config2__vendor, '/lib/apttus-nova-design-system/lib/nova.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.Apttus_Config2__ngCPQ, '/aptCPQUI/assets/stylesheets/nova-design-style-changes.css')}"/>

  

<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script>
 var App = angular.module('myApp', []);
 App.controller('myctrl', function ($scope) { 
 $scope.lineItems= {!UpdateString};
 console.log("firstPrint $scope.lineItems===", $scope.lineItems);      
 $scope.items= [];
 
 //console.log("jsonlitem"+jsonlitem); 
 console.log("===========secondPrint $scope.lineItems===", $scope.lineItems); 
// $scope.json=angular.toJson($scope.lineItems); 
 
  $scope.getItems = function() {
      //alert($scope.lineItems);
      console.log("getitems -- Print $scope.lineItems", $scope.lineItems); 
        //console.log("jsonlitem"+jsonlitem);  
      var currentMinute = new Date().getMinutes();
      $scope.CurrentDate = new Date();
      alert('Save'+$scope.CurrentDate);
        $scope.json=angular.toJson($scope.lineItems); 
     Visualforce.remoting.Manager.invokeAction(
     '{!$RemoteAction.costController.ItemsUpdate}', 
     $scope.json,
     function(result, event) {
         //alert(result);
         //alert('enterFunction');
       $scope.items= result;
     }); 
  }
  
      $scope.reloadPage = function(){
      	$window.location.reload();
  	  }
      
 });
</script>

<style>
.button{
border: none;
border-radius: 5px;
background: #A5E0BB;
margin: .4rem .25rem;
font-size: .95rem;
padding: .4rem 1rem;
font-weight: 400;
border: none;
border-radius: 5px;
cursor: pointer;
color: #28492C;
margin-left: 500px;

}
</style>
<style>

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.input{
padding: -20px;
text-align: left;
font-size: 15px;   
color: #2093DA;


}

.cost{
padding: -20px;
text-align: right;
font-size: 15px;   


}



th {
background-color: white;
color: #44596C;
min-width: 6rem;
text-align: center !important;
margin-bottom: .5rem;
font-size: 0.875rem;
line-height: 1rem;
font-weight: 700;
}
</style>
</head>
<body ng-app="myApp" class="container" > 

<div style="display:{!if(outPut,"block","none")};" ng-controller="myctrl">   

<table class="table table-bordered" id="t01" width="80%">
<tr>
    <th >Item </th>
    <th colspan="2" >Engineering </th>
    <th colspan="2">Sourcing</th>
    <th colspan="2">Manufacturing </th>
    <th colspan="2">I and FS </th>
    <th> </th>
    
</tr>
 <tr>
   <th></th>
   <th>Per Item</th>
   <th>Per Project</th>
   <th>Per Item</th>
   <th>Per Project</th>
   <th>Per Item</th>
   <th>Per Project</th>
   <th>Per Item</th>
   <th>Per Project</th>
   <th>Cost/unit</th>
 </tr>
 

 <tr ng-repeat="linitem in lineItems| filter:query"> 
     <td>{{linitem.Apttus_Config2__OptionId__r.Name}}</td>
     <td>{{linitem.Apts_Engineering_per_item__c}}</td>
     <td>{{linitem.Apts_Engineering_per_project__c}}</td>
     <td>{{linitem.Apts_Sourcing_price_item__c}}</td>
     <td>{{linitem.Apts_sourcing_per_project__c }}</td>
     <td>{{linitem.apts_Manufacturing_per_item__c}}</td>
     <td>{{linitem.Apts_Manufacturing_per_project__c}}</td>
     <td>{{linitem.Apts_I_FS_per_item__c}}</td>
     <td>{{linitem.Apts_I_FS_per_project__c}}</td>
     <td>{{linitem.Cost_per_unit__c}}</td>
 </tr>
</table>    

</div>


<div style="display:{!if(edit,"block","none")};" ng-controller="myctrl">      
   <apex:form id="editForm">  
       {!now()}
    <table class="table table-bordered" id="t01" width="70%">
 <tr>
     <tr>
    <th width="40%">Item </th>
    <th colspan="2" >Engineering </th>
    <th colspan="2">Sourcing</th>
    <th colspan="2">Manufacturing </th>
    <th colspan="2">I and FS </th>
    <th> </th>
 </tr> 
</tr>
 <tr>
   <th width="100%"></th>
   <th>Per Item</th>
   <th>Per Project</th>
   <th>Per Item</th>
   <th>Per Project</th>
   <th>Per Item</th>
   <th>Per Project</th>
   <th>Per Item</th>
   <th>Per Project</th>
   <th>Cost/unit</th>
 </tr>
 
 <tr ng-repeat="linitem in lineItems| filter:query">     
     <td >
     <div ng-if="linitem.Apttus_Config2__OptionId__r.Name == null " style="color:#2093DA;font-weight:bold" > 
        {{linitem.Bundle_Name__c}} 
    </div>
    
     <div ng-if="linitem.Apttus_Config2__OptionId__r.Name != null "  class="input">  
        {{linitem.Apttus_Config2__OptionId__r.Name}} 
    </div>
     </td>
     <td><input type="text" ng-model=" linitem.Apts_Engineering_per_item__c" style="width:80px;" ng-if="linitem.Apttus_Config2__OptionId__r.Name != null "/></td>
     <td><input type="text" ng-model=" linitem.Apts_Engineering_per_project__c" style="width:80px;" ng-if="linitem.Apttus_Config2__OptionId__r.Name != null "/></td>
     <td><input type="text" ng-model=" linitem.Apts_Sourcing_price_item__c" style="width:80px;" ng-if="linitem.Apttus_Config2__OptionId__r.Name != null "/></td>
     <td><input type="text" ng-model=" linitem.Apts_sourcing_per_project__c" style="width:80px;" ng-if="linitem.Apttus_Config2__OptionId__r.Name != null "/></td>
     <td><input type="text" ng-model=" linitem.apts_Manufacturing_per_item__c" style="width:80px;" ng-if="linitem.Apttus_Config2__OptionId__r.Name != null "/></td>
     <td><input type="text" ng-model=" linitem.Apts_Manufacturing_per_project__c" style="width:80px;" ng-if="linitem.Apttus_Config2__OptionId__r.Name != null "/></td>
     <td><input type="text" ng-model=" linitem.Apts_I_FS_per_item__c" style="width:80px;" ng-if="linitem.Apttus_Config2__OptionId__r.Name != null "/></td>
     <td><input type="text" ng-model=" linitem.Apts_I_FS_per_project__c" style="width:80px;" ng-if="linitem.Apttus_Config2__OptionId__r.Name != null "/></td>
     <td ng-if="linitem.Apttus_Config2__OptionId__r.Name != null" class="cost">{{linitem.Cost_per_unit__c}}</td>         
 </tr> 
</table>
        <apex:actionFunction name="jsCallMethod"   reRender="pageId"/>
    		
            <apex:outputPanel onclick="jsCallMethod()">
                <button  ng-click="getItems()" class="button" >Save </button>
            </apex:outputPanel>
       </apex:form>    
        
        
</div>


      

</body>

</apex:page>

When page refreshed manually we can see the values changed in the table, but when  page rerendered using actionfunction in the code when clicked on save, values are not changed.