25

Is there any way to access controller variable set in a Method in Javascript. In the example above the value is set in constructor. But when I set it in a method it is showing as NULL in Javascript

In controller:

public class abc { public string varA { get;set; } public void fn(){ varA='hello'; } }

In VFPage:

function hello(){ var bool = '{!varA}'; alert(bool); }

The alert statement in the VF Page(i.e bool) is displayed as null. Can you please help how to access a variable set from a method instead of constructor?

Improve this question
2
  • Has method fn() been invoked by the time you need it in your Javascript? When does fn() get invoked? Commented Nov 13, 2013 at 23:34
  • yes fn() is invoked first by the time we need it in javascript Commented Nov 14, 2013 at 0:18

3 Answers 3

Reset to default
24

Accessing controller properties uses the usual get & set syntax.

Set in a constructor and retrieved using the shorthand notation

public class YourController { public string varA { get; set; } // use the proper type public YourController() { varA = 'Some text'; } }

or

Retrieved from the getNNN mechanism

public class YourController { public YourController() { } public string getvarA() { return 'Some text'; } }

or

Retrieved from a shorthand getter which calls a method in the controller

public class YourController { public YourController() { } public string varA { get { return doIt(); } } private string doIt() { return 'Some text'; } }

VF Page - JavaScript function - controller property reference will work with any of the above examples:

<script> function hello(){ var theControllerValue = '{!varA}'; alert(theControllerValue); } </script>

The rendered source for the page, which you can go look at in the browser, will look like this after the substitution for the controller variable has been made:

function hello(){ var theControllerValue = 'Some text'; alert(theControllerValue); }
Improve this answer
6
  • I need string in javascript not boolean Commented Nov 13, 2013 at 23:13
  • @sf.dev, updated the example per your comment but the implementation is identical in both cases. Commented Nov 14, 2013 at 0:42
  • @ Mark Pund variable is showing null in javascript Commented Nov 14, 2013 at 1:33
  • @MarkPond You apparently missed the part where they asked "not in the constructor." This entire answer, while awesomely detailed, doesn't appear to answer the question at all. Commented Nov 14, 2013 at 2:18
  • 1
    @sfdcfox I now see where the disconnect is - the original question makes no mention of whether the 'method', fn() in the example, is called by a page action like a button click as your example demonstrates. My examples presume that this is not the case. You are correct that there are a variety of ways to implement the solution. Additional clarification in the question of the page behavior and how the method is called would help. Commented Nov 14, 2013 at 15:39
15

You have to re-render the script in order to have the value appear. Consider the following:

Controller

public class Controller { public String varA { get; set; } public void updateVarA() { varA = 'Hello'; } }

Page

<apex:page controller="Controller"> <apex:form id="form"> <apex:outputText id="script"> <script> function hello() { var helloWord = "{!JSENCODE(varA)}" alert(helloWord); } </script> </apex:outputText> <apex:actionFunction action="{!updateVarA}" reRender="script" name="callUpdateA"/> <button onclick="callUpdateA()">Call Update A</button> <button onclick="hello()">Say Something!</button> </apex:form> </apex:page>

How It Works

We don't initially set any value (there's no constructor at all), so when you click on Say Something, it will alert "null". Clicking "Call Update A" calls "callUpdateA()", which invokes the actionFunction, which updates the page. The trick here is that the actionFunction re-renders the script-- the new value will be available in the function after the call completes. Finally, clicking on "Say Something" again will result in an alert that reads "Hello".

This isn't the only way to do this, but is probably one of the easier ways to accomplish this task.

Improve this answer
1
  • Thanks this is easier to follow than the other examples. Commented Mar 19, 2015 at 15:11
0

bit change in your code

function hello() { var helloWord = "{!JSENCODE(varA)}" alert(helloWord); } Call Update A Say Something!

this works with instead... Enjoy Coding!! :)

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.