+ Start a Discussion
embemb 

VisualForce: how do I pass data from controller to javascript?

Hello,

 

My request is on the title. It seems to be simple, but I don't find a simple explanation to do that:

How do I pass data, from controller to javascript?

 

The situation is:

I have a controller which get some data from the database :

public with sharing class recup_donnees_test_Controller {
    
    Public LIST<Calendrier__c> GetCalendriers(){
            return Calendriers_Interne;
    }
    
    Public void SetCalendriers(LIST<Calendrier__c>Calendriers){
            Calendriers_Interne = Calendriers;
    }   

    Private LIST<Calendrier__c>Calendriers_Interne = new LIST<Calendrier__c>();

    Public recup_donnees_test_Controller (){
        
        Calendriers_Interne = [Select c.nom__c, c.id__c, c.Tache__c, c.SystemModstamp, c.Ressource__c, c.OwnerId, c.Name, c.LastModifiedDate, c.LastModifiedById, c.LastActivityDate, c.IsDeleted, c.Id, c.Heure_Fin__c, c.Heure_Debut__c, c.Date__c, c.CreatedDate, c.CreatedById, c.Categorie__c From Calendrier__c c WHERE c.Ressource__c = 'FRANCO-IDRISS Béatrice'];

    }
   

}

And then i have a Visual Force page, in which would like to get the data

 

Visual force page:

<apex:page Controller="recup_donnees_test_Controller" >

    <apex:pageBlock title="Calendrier">
    <apex:pageBlockTable value="{!Calendriers}" var="c">
        <apex:column headerValue="nom" value="{!c.nom__c}"/>
        <apex:column headerValue="Tâche" value="{!c.Tache__c}"/>
        <apex:column headerValue="Ressource" value="{!c.Ressource__c}"/>
        <apex:column headerValue="Date" value="{!c.Date__c}"/>
        <apex:column headerValue="Heure Début" value="{!c.Heure_Debut__c}"/>
        <apex:column headerValue="Heure Fin" value="{!c.Heure_Fin__c}"/>
 
    </apex:pageBlockTable>
</apex:pageBlock>



</apex:page>

 

if someone could help me?

Thank you

 

Emmanuel

pankaj.raijadepankaj.raijade

Use hidden variables. Map those to properties in controller.

 

Using documment.getelementbyid in JavaScript() you can access value in hidden variable.

 

Regards,

Pankaj Raijade,

Himanshu ParasharHimanshu Parashar

Create new property in controller and access that in javascript using {!property_name}

Himanshu ParasharHimanshu Parashar

let me know if you find it difficult

embemb

Hello

Thank you!

 

Yes it's dificult for me.

Could you please give me a simple example ? So i can use it in my development?

Do i have to create a compoment?

 

I try to understand how to create a property now...

 

Emmanuel

Himanshu ParasharHimanshu Parashar

Define below as property

 

 

 

public Boolean ErrorOcc{get; set;} 

 

 

and access it's value in visual force page as

<script>
var ErrorOcc='{!ErrorOcc}'; 
alert(ErrorOcc);
</script>
 

 

 

 

embemb

How to define "public Boolean ErrorOcc{get; set;} " as property ?

Himanshu ParasharHimanshu Parashar

In your example put

 

public Boolean ErrorOcc{get; set;} 

 between class definition so it wil be

 

 

public with sharing class recup_donnees_test_Controller {
       public Boolean ErrorOcc{get; set;} 

}

 

Himanshu ParasharHimanshu Parashar

please mark it as solution if you find it useful

embemb

I test your script.

I get an alert "false".

 

How do i "put" my data (for example "c.Date__c" , and where, in the controller and in the VF page ???

Himanshu ParasharHimanshu Parashar

Please use below code:

 

Simplified Controller:

public with sharing class recup_donnees_test_Controller {
    
   public LIST<Calendrier__c> Calendriers_Interne = new LIST<Calendrier__c>{get;private set;}
   public String ErrorOcc{get;private set;}
    Public recup_donnees_test_Controller (){
        
        Calendriers_Interne = [Select nom__c, id__c, Tache__c, SystemModstamp, Ressource__c, OwnerId, Name, LastModifiedDate, LastModifiedById, LastActivityDate, IsDeleted, Id, Heure_Fin__c, Heure_Debut__c, Date__c, CreatedDate, CreatedById, Categorie__c From Calendrier__c WHERE Ressource__c = 'FRANCO-IDRISS Béatrice' limit 1];
 
      for(Calendriers_Interne tempCal :Calendriers_Interne)
      {      
           Errorocc=tempCal.Date__c;
      }


    }
       

}

 

Visual Force Page

 

<apex:page Controller="recup_donnees_test_Controller" >
<script>
var ErrorOcc='{!ErrorOcc}'; 
alert(ErrorOcc);
</script>
    <apex:pageBlock title="Calendrier">
    <apex:pageBlockTable value="{!Calendriers}" var="c">
        <apex:column headerValue="nom" value="{!c.nom__c}"/>
        <apex:column headerValue="Tâche" value="{!c.Tache__c}"/>
        <apex:column headerValue="Ressource" value="{!c.Ressource__c}"/>
        <apex:column headerValue="Date" value="{!c.Date__c}"/>
        <apex:column headerValue="Heure Début" value="{!c.Heure_Debut__c}"/>
        <apex:column headerValue="Heure Fin" value="{!c.Heure_Fin__c}"/>
 
    </apex:pageBlockTable>
</apex:pageBlock>

 

embemb

i get en error :

 

Erreur : recup_donnees_test_Controller Erreur de compilation : expecting right curly bracket, found ';' à la ligne 3 colonne 79

 

but it seems to be well wrote ( i copy the script and your script seems to be ok). So i don't find the cause of the error...

 

I understand that you are helping me!

Himanshu ParasharHimanshu Parashar
Replace 
public LIST<Calendrier__c> Calendriers_Interne = new LIST<Calendrier__c>{get;private set;}

with 
public LIST<Calendrier__c> Calendriers_Interne{get;private set;}

 and initialize it in constructor as 

 

Calendriers_Interne = new LIST<Calendrier__c>();

 

embemb

I get an error:

Erreur : recup_donnees_test_Controller Erreur de compilation : unexpected token: '=' à la ligne 4 colonne 23

 

 

Now my controller is:

 

public with sharing class recup_donnees_test_Controller {
   
   public List<Calendrier__c> Calendriers_Interne{get; private set;}
   Calendriers_Interne = new LIST<Calendrier__c>();
   public String ErrorOcc{get;private set;}
    Public recup_donnees_test_Controller (){
       
        Calendriers_Interne = [Select nom__c, id__c, Tache__c, SystemModstamp, Ressource__c, OwnerId, Name, LastModifiedDate, LastModifiedById, LastActivityDate, IsDeleted, Id, Heure_Fin__c, Heure_Debut__c, Date__c, CreatedDate, CreatedById, Categorie__c From Calendrier__c WHERE Ressource__c = 'FRANCO-IDRISS Béatrice' limit 1];
 
      for(Calendriers_Interne tempCal :Calendriers_Interne)
      {     
           Errorocc=tempCal.Date__c;
      }


    }
      

}

Himanshu ParasharHimanshu Parashar

I asked you to initialize list in constrctor so your code should be like this

 

public with sharing class recup_donnees_test_Controller {
   
   public List<Calendrier__c> Calendriers_Interne{get; private set;}
   
   public String ErrorOcc{get;private set;}
    Public recup_donnees_test_Controller (){
        Calendriers_Interne = new LIST<Calendrier__c>();
        Calendriers_Interne = [Select nom__c, id__c, Tache__c, SystemModstamp, Ressource__c, OwnerId, Name, LastModifiedDate, LastModifiedById, LastActivityDate, IsDeleted, Id, Heure_Fin__c, Heure_Debut__c, Date__c, CreatedDate, CreatedById, Categorie__c From Calendrier__c WHERE Ressource__c = 'FRANCO-IDRISS Béatrice' limit 1];
 
      for(Calendriers_Interne tempCal :Calendriers_Interne)
      {     
           Errorocc=tempCal.Date__c;
      }


    }
      

}

 

embemb

with your the new script, i get an error again...:

Erreur : recup_donnees_test_Controller Erreur de compilation : Invalid type: Calendriers_Interne à la ligne 10 colonne 11

Himanshu ParasharHimanshu Parashar

oh ok I forgot that date__c is date type so replace 

 

public String ErrorOcc{get;private set;}

to 

public Date ErrorOcc{get;private set;}

 

embemb

error again...

Erreur : recup_donnees_test_Controller Erreur de compilation : Invalid type: Calendriers_Interne à la ligne 11 colonne 11

 

The 'date__c' is a custom field, so it gives data. I doubt that change it for 'date' could be a good thing...

 

 

public with sharing class recup_donnees_test_Controller {
  
   public List<Calendrier__c> Calendriers_Interne{get; private set;}
  
   public Date ErrorOcc{get;private set;}
  
    Public recup_donnees_test_Controller (){
        Calendriers_Interne = new LIST<Calendrier__c>();
        Calendriers_Interne = [Select nom__c, id__c, Tache__c, SystemModstamp, Ressource__c, OwnerId, Name, LastModifiedDate, LastModifiedById, LastActivityDate, IsDeleted, Id, Heure_Fin__c, Heure_Debut__c, Date__c, CreatedDate, CreatedById, Categorie__c From Calendrier__c WHERE Ressource__c = 'FRANCO-IDRISS Béatrice' limit 1];
 
      for(Calendriers_Interne tempCal :Calendriers_Interne)
      {    
           Errorocc=tempCal.Date__c;
      }


    }
     

}

Himanshu ParasharHimanshu Parashar

Change datatype to again String and replace 

 

    Errorocc=tempCal.Date__c;   

 

with

 

  Errorocc= String.valueOf(tempCal.Date__c);

Himanshu ParasharHimanshu Parashar

Does it solve problem

embemb

now i get:

Erreur : recup_donnees_test_Controller Erreur de compilation : Invalid type: Calendriers_Interne à la ligne 11 colonne 11



Himanshu ParasharHimanshu Parashar

ahh. sorry. your variable name is little bit confusing 

 

replace old for loop line with this one

 

for(Calendrier__c tempval :Calendriers_Interne)

 

 

embemb

now i get: Erreur : recup_donnees_test_Controller Erreur de compilation : Variable does not exist: tempCal.Date__c à la ligne 13 colonne 39

 

thank you for your help

Himanshu ParasharHimanshu Parashar

use below code

 

for(Calendrier__c tempCal :Calendriers_Interne)

 

 

 

embemb

Yes, i had seen this error...

 

But now i get another error:

 

Erreur : recup_donnees_test_Controller Erreur de compilation : Illegal assignment from String to Date à la ligne 13 colonne 12

 

Himanshu ParasharHimanshu Parashar

didn't you change the data type at top from date to String

 

public String ErrorOcc{get;private set;}

 

 

embemb

no...

Now i have changed public Date ErrorOcc{get;private set;} to: public String ErrorOcc{get;private set;}

 

but iget 2 errors:

Erreur : recup_donnees_test line 16, column 18: XML document structures must start and end within the same entity

Erreur : XML document structures must start and end within the same entity.

 

Here is the Controller script:

 

public with sharing class recup_donnees_test_Controller {
  
   public List<Calendrier__c> Calendriers_Interne{get; private set;}
   public String ErrorOcc{get;private set;}
 
    Public recup_donnees_test_Controller (){
        Calendriers_Interne = new LIST<Calendrier__c>();
        Calendriers_Interne = [Select nom__c, id__c, Tache__c, SystemModstamp, Ressource__c, OwnerId, Name, LastModifiedDate, LastModifiedById, LastActivityDate, IsDeleted, Id, Heure_Fin__c, Heure_Debut__c, Date__c, CreatedDate, CreatedById, Categorie__c From Calendrier__c WHERE Ressource__c = 'FRANCO-IDRISS Béatrice' limit 1];
 
        for(Calendrier__c tempCal :Calendriers_Interne)
      {    
           Errorocc= String.valueOf(tempCal.Date__c);
      }


    }
     

}

Himanshu ParasharHimanshu Parashar

can you post your vf page code.

embemb

Here is the VF page :

<apex:page Controller="recup_donnees_test_Controller" >
<script>
var ErrorOcc='{!ErrorOcc}'; 
alert(ErrorOcc);
</script>
    <apex:pageBlock title="Calendrier">
    <apex:pageBlockTable value="{!Calendriers}" var="c">
        <apex:column headerValue="nom" value="{!c.nom__c}"/>
        <apex:column headerValue="Tâche" value="{!c.Tache__c}"/>
        <apex:column headerValue="Ressource" value="{!c.Ressource__c}"/>
        <apex:column headerValue="Date" value="{!c.Date__c}"/>
        <apex:column headerValue="Heure Début" value="{!c.Heure_Debut__c}"/>
        <apex:column headerValue="Heure Fin" value="{!c.Heure_Fin__c}"/>
 
    </apex:pageBlockTable>
</apex:pageBlock>

Himanshu ParasharHimanshu Parashar

You are missing </apex:page> at the end. It should be like this

 

<apex:page Controller="recup_donnees_test_Controller" >
<script>
var ErrorOcc='{!ErrorOcc}'; 
alert(ErrorOcc);
</script>
    <apex:pageBlock title="Calendrier">
    <apex:pageBlockTable value="{!Calendriers}" var="c">
        <apex:column headerValue="nom" value="{!c.nom__c}"/>
        <apex:column headerValue="Tâche" value="{!c.Tache__c}"/>
        <apex:column headerValue="Ressource" value="{!c.Ressource__c}"/>
        <apex:column headerValue="Date" value="{!c.Date__c}"/>
        <apex:column headerValue="Heure Début" value="{!c.Heure_Debut__c}"/>
        <apex:column headerValue="Heure Fin" value="{!c.Heure_Fin__c}"/>
 
    </apex:pageBlockTable>
</apex:pageBlock>
</apex:page>

 

embemb

Now i get

Erreur : Propriété 'recup_donnees_test_Controller.Calendriers' inconnue

 

why it search a ".Calendrier" at the end of the controller name ?

 

 

Himanshu ParasharHimanshu Parashar

It is because you are referecing wrong variable in apex page.. your list name in controller is Calendriers_Interne but you are refering Calendriers in apex page. please replace it with Calendriers_Interne

embemb

Thank you very much for your help Himanshu!

The script works. It's great!

 

i have a last question, if you agree.

 

In the query, I ve changed the limit to 10. In the for, Errorocc get only the last record. How can i collect the 10 records? Instead of only the last record?

 

 

 

Himanshu ParasharHimanshu Parashar

congrats..

 

do you want to get date list in javascript ?

 

embemb

 

not only date, but several fields/data.

 

The objective for me is to get something like that:

 

records=Id:'a0FU0000000Y0l5MAC', Tache__c:'Banque BCP - Financement des TPE', Ressource__c:'FRANCO-IDRISS Béatrice', OwnerId:'005U0000000hDs5IAE', Heure_Fin__c:'18:00:00', Heure_Debut__c:'09:00:00', Date__c:'2011-05-31',  Categorie__c:'Intra-fr-Confirmer'

 

 

Himanshu ParasharHimanshu Parashar

if you want that then it's better to user salesforce javascript API

embemb

 

yes of course i don't need to get only 1 record...

 

So i will read about and try salesforce javascript API.

 

Thanks again

 

 

 

Himanshu ParasharHimanshu Parashar

great. best of luck

embemb

 

It's a little disappointing to cannot make an array (or something like...) here...

 

 for(Calendrier__c tempCal :Calendriers_Interne)
      {   
           Errorocc= String.valueOf(tempCal.Date__c);
      }



 

So, it's not possible to collect data in apex?

I have to search more....

 

 

have a nice evening!

 

Emmanuel

Himanshu ParasharHimanshu Parashar

it will be quite easy with javascript api

Himanshu ParasharHimanshu Parashar

give it a try at your end if you find it difficult then let me know i will help you out.

embemb

 

ok, but i have to use sharing rules from force.com and/or salesforce.

I need to 'respect' the sharing settings to access some data.

For example, "user_2" can access only some accounts and not others accounts.

Thats why i have choose first an apex query, instead of a javascript query.

 

Unless that it would be possible to do that with javascript...



mohimohi

In the Constructor You may assign value to Property

Or in the method and rendering the page in script