function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sandeep unnikrishnansandeep unnikrishnan 

issue while using remote object on visualforce page

Hi All ,
I am using remote object to querry my object 'test__c' it does retrieve all the records and render the table but on the first click its not populating the table from the second click its working fine .
Below is the page that i have built . Please advice 

<apex:page showHeader="true" sidebar="true">
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<apex:remoteObjects jsNamespace="test" >
    <apex:remoteObjectModel name="test__c" jsShorthand="TB" fields="Name,Id"> 
    
        <apex:remoteObjectField name="Email__c" jsShorthand="email"/>
     
    </apex:remoteObjectModel>
</apex:remoteObjects>

<div ng-app="app" ng-controller="MyCtrl" >
        <div >
 
          <div >
            <input id="textid" type="text" placeholder="Search Text" ng-model="SearchText" />
             </div>
              <div >
         <button ng-click="searchRec();">Search</button>    
             </div>
    </div>
    <br/>
             <div ng-if="showMyUL">
          <div>
  <table >
  <thead>
    <tr >
      <th>
        <span >email</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="x in emails | filter:filterfurther">
      <td data-label="activity"  >
        <span > {{ x.email}}</span>
      </td>
    </tr>
  </tbody>
</table>
</div>
</div>
</div>

<script>
    var app = angular.module('app', []);
    var lst=[];
    app.controller('MyCtrl', function($scope) {
      var en = new test.TB();
      $scope.searchRec = function(){
        en.retrieve({where:{email:{like:"%"+$scope.SearchText+"%"}},limit: 30 }, function(err, records, event){
          if(err) {
            alert(err.message);
          }
          else {  
            $scope.showMyUL=true;
            records.forEach(function(record) {

              lst.push({email:record.get("email")});
            });
          }   
          $scope.calculateService();
        });

      };

      $scope.calculateService = function(){ 
        $scope.emails=lst;
        lst=[]; 
      };  

    });         

    </script>
    </apex:page>

Thanks in advance !

Regards,
Sandeep
Best Answer chosen by sandeep unnikrishnan
sandeep unnikrishnansandeep unnikrishnan

i found the reason its not working from another community .. the reason is that  'retrieve' function is not part of Angular and returns its results asynchronously

All Answers

logontokartiklogontokartik
Looks like you are using Angular with Remote Objects from the above. Can you add Console.log statement in the searchRec function and see if it is getting fired on the click. Also print SearchText
Something like
 
$scope.searchRec = function(){
         console.log($scope.SearchText);        
en.retrieve({where:{email:{like:"%"+$scope.SearchText+"%"}},limit: 30 }, function(err, records, event){
          console.log(records);
        if(err) {
            alert(err.message);
          }
          else {  
            $scope.showMyUL=true;
            records.forEach(function(record) {

              lst.push({email:record.get("email")});
            });



 
sandeep unnikrishnansandeep unnikrishnan
I did try that earlier .It did print the object array for each click  for each click
sandeep unnikrishnansandeep unnikrishnan
tt was my search text and array[object,object] my result

tt 
Array [ Object, Object ]
sandeep unnikrishnansandeep unnikrishnan
<apex:page showHeader="true" sidebar="true">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <apex:remoteObjects jsNamespace="test" >
        <apex:remoteObjectModel name="Test__c" jsShorthand="TB" fields="Name,Id"> 
            <apex:remoteObjectField name="Email__c" jsShorthand="email"/>  
        </apex:remoteObjectModel>
    </apex:remoteObjects>
    <div ng-app="app" ng-controller="MyCtrl" >
        <input id="textid" type="text" placeholder="Search Text" ng-model="SearchText" />
        <button ng-click="searchRec();">Search</button>    
        <table >
            <tr >
                <th>
                    <span >emails</span>
                </th>
            </tr>
            <tr ng-repeat="x in emails | filter:filterfurther">
                <td data-label="activity"  >
                    <span > {{ x.email}}</span>
                </td>
            </tr>
        </table>            
    </div>            
    <script>
    var app = angular.module('app', []);
    var lst=[];
    app.controller('MyCtrl', function($scope) {
        var en = new test.TB();
        $scope.searchRec = function(){
            console.log($scope.SearchText); 
            en.retrieve({where:{email:{like:"%"+$scope.SearchText+"%"}},limit: 30 }, function(err, records, event){
                if(err) {
                    alert(err.message);
                }
                else {              
                    console.log('test:',records);
                    records.forEach(function(record) {
                        
                        lst.push({email:record.get("email")});
                    });
                }   
                $scope.calculateService();
            });  
        };
        $scope.calculateService = function(){ 
            console.log('insidecalculateService',lst);
            $scope.emails=lst;
            lst=[]; 
        };  
    });         
    </script>
</apex:page>
I have cleaned up the code for better understanding ... the issue still persists
sandeep unnikrishnansandeep unnikrishnan

i found the reason its not working from another community .. the reason is that  'retrieve' function is not part of Angular and returns its results asynchronously
This was selected as the best answer