function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Anupama@28Anupama@28 

How to access the controllers List in javascript?

Hi,

I have a requirement where I need to access the controller's List into javascript.
Below is my partial code which I have tried with.

<apex:component controller="MyCompController">
    ---
    ---
        <script>
        Var arr1 = new Array();      // OR var arr1 = [];        
             <apex:repeat value="{!AccountIdList}" var="accId">
            arr1.push('{!accId}');
             </apex:repeat >                    
         alert('#### elements :' +arr1);        
         </script>
    ---
    ---

</apex:component>


controller
=====================
public class MyComponentController
{
    public List<String> AccountIdList {get; set;}   
    public MyComponentController()
    {
        List<Account> acc = [Select name, id from account];
        for(Account a : acc)
        {
            AccountIdList.add(a.id);
        }    
    }
    
}

Is anything wrong I have done? Please help.
 
Best Answer chosen by Anupama@28
Gil GourévitchGil Gourévitch
Hi,
JS remoting works fine too, but Anupama@28 was so close to the solution, it would be a shame not to continue in that way.

Try these files (I tried, it works) :
MyCompController : 
public class MyCompController
{
    public List<String> AccountIdList {get; set;}   
    public MyCompController()
    {
        List<Account> acc = [Select name, id from account];
        AccountIdList = new List<String>();
        for(Account a : acc)
        {
            AccountIdList.add(a.id);
        }    
    }
    
}
VF component "testcmp": 
<apex:component controller="MyCompController">
        <script>
        var arr1 = new Array();      // OR var arr1 = [];        
             <apex:repeat value="{!AccountIdList}" var="accId">
            arr1.push('{!accId}');
             </apex:repeat >                    
         alert('#### elements :' +arr1);        
         </script>
</apex:component>
VF Page (you need this to view your component) "testcmppage" : 
<apex:page >
    <c:testcmp></c:testcmp>
</apex:page>
when you type the url : https://INSTANCE.salesforce.com/apex/testcmppage, you should see an alert box showing a list of account ids.

Hope this helps
Gil

Question Solved ? Please mark as the best answer to help other users !

All Answers

Gil GourévitchGil Gourévitch
Hi,
I think you have a "Null pointer exception" message, no ?
You did not initialize the AccountIdList list before fill it with ids : 
AccountIdList = new List<Id>();
for(Account a : acc)
.....
There is nothing wrong with the javascript part of your code.
If this do not work, post your error message here.

Hope this helps
Gil

Question Solved ? Please mark as the best answer to help other users !
 
RishavRishav
Hii  Anupama,
How can you use the visualforce component like <apex:repeat> inside the javascript directly and if anyhow it is working then i will be wonder to see this.  I also tried to use the visualforce coponent inside the javascript but it is not working.
In my view for your probolem you should use the visualforce remoting ,  This can return back the data from controller class to javascript .
I am giving you a simple example that is returning a single value in the same way you can get the list of  value from cotroller also.
  
<apex:page controller="VfRemotingTrialCls" showHeader="false" standardStylesheets="false">
<script>
function getText(){
  var text ="";

  VfRemotingTrialCls.doGetText(
  
   function (result,event){  
    
   // checking for error or exception event 
   if(event.type==='exception'){
    
      console.log("exception");
      console.log(event);
   }
   else if(event.status){
   
      text = result;
     
      document.getElementById('textResponseSpan').innerHTML = text;
      document.getElementById('{!$Component.page.textResponseApexOutputText}').innerHTML = text;
      alert('hello'+text);
   }
      else {
            alert('hello');
            console.log(event.message);
          }
   } 
  
  );
}
</script>
  <h2> Simple java script remoting example </h2>
  <button id="btn" onclick="getText()">Get Static Text </button>
  <span id="textResponseSpan"></span> <br/>
  <apex:outputText id="textResponseApexOutputText"></apex:outputText>
</apex:page>


==========================
public with sharing class VfRemotingTrialCls {

    public VfRemotingTrialCls(){
    }
    
    @RemoteAction    
    public static String doGetText(){
    
      return 'this is the response from remote action method';
      
    }
    
}


Try to declare one Array inside the javascript and assign value in that . 

 

Thanks 
Rishav
Gil GourévitchGil Gourévitch
Hi,
JS remoting works fine too, but Anupama@28 was so close to the solution, it would be a shame not to continue in that way.

Try these files (I tried, it works) :
MyCompController : 
public class MyCompController
{
    public List<String> AccountIdList {get; set;}   
    public MyCompController()
    {
        List<Account> acc = [Select name, id from account];
        AccountIdList = new List<String>();
        for(Account a : acc)
        {
            AccountIdList.add(a.id);
        }    
    }
    
}
VF component "testcmp": 
<apex:component controller="MyCompController">
        <script>
        var arr1 = new Array();      // OR var arr1 = [];        
             <apex:repeat value="{!AccountIdList}" var="accId">
            arr1.push('{!accId}');
             </apex:repeat >                    
         alert('#### elements :' +arr1);        
         </script>
</apex:component>
VF Page (you need this to view your component) "testcmppage" : 
<apex:page >
    <c:testcmp></c:testcmp>
</apex:page>
when you type the url : https://INSTANCE.salesforce.com/apex/testcmppage, you should see an alert box showing a list of account ids.

Hope this helps
Gil

Question Solved ? Please mark as the best answer to help other users !
This was selected as the best answer