Apex Code Development You need to sign in to do that
Don't have an account?
Suvra Accessing Javascript variable from Visualforce page
Hi All,
In many places of Visualforce Code development I needed to have the some javascript variables to be accessed from the page. Say, I have one String "Hello World" in one javascript variable, how to print that by use of <apex:outputtext> tag of visualforce?
Also, sometimes I need to update some Apex COntroller variable with the value of Javascript var.
Do you people have any kind of idea on how to accomplish this..Please help.
Thanks in advance,
Suvra
Hey
Going the one way is difficult. If you need to assign a javascript value to an outputText for example you would need to find the field by it's ID within the DOM model and use the .value of the element to set the value. I don't think you'll see the value change in the form, but when it's submitting your apex code will get it's value.
The other way is simpler. To get an apex value in javascript simply do this:
var myVar = '{!MyVar}';
A bit more on this can be found here. The article there isn't directly what you need but has some techniques that might be helpful.
Wes
Displaying a JavaScript variable can be done, but not as easily as you might think, as you can't embed '<' characters in the output string.
I use the following mechanism:
Two methods in my controller to generate the beginning/end of the JavaScript write:
public String getJSStart() { return '<script>document.write('; } public String getJSEnd() { return ')</script>'; }
I can then do the following on my page:
<script> var str="Hello world!"; </script> <apex:outputText value="{!JSStart}str{!JSEnd}" escape="false"/>
and I get the output I expect. Make sure you set the escape="false" attribute, otherwise you will just see a text version of the JavaScript.
Setting a value is a little easier, although you still have to work a bit to get the component's id. Here's an example:
var reasonEle=document.getElementById('{!$Component.dcForm.dcBlock.dcSection.reasonItem.reason}'); var str='Hello world'; if (reasonEle.value.length==0) { reasonEle.value=str; }
When getting the element by ID, you have to supply the full path through the VisualForce component hierarchy. In my example above, the element (id=reason) is within a PageBlockSectionItem (id=reasonItem) within a PageBlockSection (id=dcSection) within a pageblock (id=dcBlock) within a form (id=dcForm)
hi...thanks a lot!!! it'll solve many of my problems...
Best regards,
Suvra
@bob: Your first suggestion is quite neat. Think I'll be trying that out in future.
The second suggestion will work, although it's not a good idea. In your example,
var reasonEle=document.getElementById('{!$Component.dcForm.dcBlock.dcSection.reasonItem.reason}');
var str='Hello world';
if (reasonEle.value.length==0)
{
reasonEle.value=str;
}
If I move the component to another part of the page the JS will no longer work. It's also tedious to have to name each parent element and then refer to them. A quicker and more maintainable method would be to use JS to declare variables at the same level in the page tree as the element you wish to refer to eg.
<apex:page>
<apex:outputText id="theText" ../>
<script> var tText = document.getElementById('{!$Component.theText}'); </script>
... etc
Yeah, I see what you mean about things breaking if components move. For me its a trade off between that and the maintainability of the page itself. In terms of simply filling in a value, its reasonable to embed that in the page at the appropriate level.
The page that I pulled that example from is doing quite a bit more in javascript with the various components, and if that is embedded in the page, then it gets quite difficult to separate the JS from the VF. It also gets interesting (ugly!) if you want to update the values of a more than one component at the same time and they are in different areas.
Hi bob,
Its great to see the js variable in visualforce page . You have written for a single variable and
Can you help me in iterating through the array of variables (java script) .
Thanks in advance.
If this is an array of variables from the controller, you'd use Visualforce components rather than javascript for this.
For example, to iterate a list of records, extract the names and store in a javascript variable, you'd use something like:
<script> var names=new Array(); <apex:repeat value="{!records}" var="rec"> names.push('{!rec.Name}'); </apex:repeat> </script>Thank you so much bob.
e.g
if ( '{!opportunity.XYZ_Create_Date__c}' != "" ){
BUT... whats the trick the get a Picklist value???
Thanks..