Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sunil_kumarsunil_kumar 

how to pass values in vf page to javascript variable

Hi all,

 

i want to pass id which i displayed in <apex:outputtext> on vf page to my javascript variable.

 

i used

var cc=document.getElementById('{!$Component.fromMain.pb2.outid}');

alert(cc);

 

my vf page code is

<apex:form id="fromMain">
<apex:pageBlock id="pb2">
  
    <apex:outputText id="outid" value="{!cid}" escape="false"/>

<apex:pageblock/>

<apex:form/>

 

in alert i am getting  [object HTMLSpanElement]

 

so i am not getting id value.

 

so can anyone help me in getting id value as i am getting id values from controller.

SargeSarge

Hi Sunil,

 

 

  In javascript , assuming id value of <apex:page/> tag is "pg", try

 

 

var outTextComponent = document.getElementById("pg:formMain:pb2:outid");
var cc = outTextComponent.value();

 

cheers..

 
aballardaballard

$Component is the correct way to get the dom id of an element.

 

In this case, <apex:outputText> will have generated a <span> surrounding the text.   You have correctly obtained the <span> element from the dom and "displayed" it in an alert. 

 

What are you really trying to do? You should not generally need to obtain the value of the output text via javascript... use the EL expression for the value directly whereever you wanted it....

 

e.g. alert('{!cid}');

 

though I assume that isn't really what you want the value for....

 
sunil_kumarsunil_kumar

hi aballard,

 

i had two methods in my controller as getStatus and getcid. for storing status value in my javascript variable i used

var m={!status};

alert(m);

so here i am getting true or false which is correct but for storing value of cid i am using

var cc='{!cid}';

alert(cc);

now i am getting correct id value but if i remove single quotes then its not working. so can you tell why one require single quote another not as both are methods in controller. i used alert only to check weather i am getting desired values or not.

 

Can you also tell me how to display javascript variable in <apex:outputtext>?

 

thanks for replying as your suggestion helps me....

 

 
sunil_kumarsunil_kumar

hi Sarge,

 

i did as you said by giving id to <apex:page> as pg  but its not  working as values are not passing to javascript variable.

 

can you please suggest me why its not working?
SargeSarge

Hi Sunil,

 

   Sorry for the faulty code. Here use the following javascript code in 2nd line of <script>  content

 

<apex: page id="pg">

    <apex:form id="formMain">

              <apex:pageBlock id="pb">

                    <apex:outputText id="outText" value="{!cid}"/>

            <apex:pageBlock>

    </apex:form>

   <script type="text/javascript>

            var outTextComponent = document.getElementById("pg:formMain:pb:outText");

            var cc = outTextComponent.innerHTML; // as output Text renderd Span element.

     </script>

</apex:page>

 

Cheers..
sunil_kumarsunil_kumar

Hi Sarge,

 

thanks for your valuable suggestion. I appended $Component before ids and it works so final expression is like this

 

var cc=document.getElementById('{!$Component.fromMain.pb2.outtext}');
var c = cc.innerHTML; // as output Text renderd Span element.
alert(c);

 

its working without including apex:page id.

 

Can you tell me why we use innerHtml on second line of javascript code?

 

Thanks
aballardaballard

The results of the EL expressions are just embedded literally in the HTML page.  You don't say how status and cid are defined, but I expect status has value true or false, so when embedded, the javascript becomes

     var m = true; 

which is valid javascript

 

I expect cid is an id with a value something like 00590000000Djck

so when embedded it becomes something like

    var cc = 00590000000Djck

which is not valid javascript.   You need to embed it inside a string to get the intended javascript code.  

  var cc = '00590000000Djck';

 

 

 
sunil_kumarsunil_kumar

Hi aballard,

 

Thanks for your valuable suggestions as it solves my problem.