current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.
up vote 12 down vote favorite

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?

share|improve this question
    
Has method fn() been invoked by the time you need it in your Javascript? When does fn() get invoked? –  crop1645 Nov 13 '13 at 23:34
    
yes fn() is invoked first by the time we need it in javascript –  sf.dev Nov 14 '13 at 0:18

4 Answers 4

up vote 12 down vote accepted

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);
}
share|improve this answer
    
I need string in javascript not boolean –  sf.dev Nov 13 '13 at 23:13
    
@sf.dev, updated the example per your comment but the implementation is identical in both cases. –  Mark Pond Nov 14 '13 at 0:42
    
@ Mark Pund variable is showing null in javascript –  sf.dev Nov 14 '13 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. –  sfdcfox Nov 14 '13 at 2:18
    
@sfdcfox there are two examples in my answer which are "not in the constructor" and demonstrates the implementation in three ways. –  Mark Pond Nov 14 '13 at 15:27
up vote 5 down vote

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.

share|improve this answer
    
Thanks this is easier to follow than the other examples. –  chrisjlee Mar 19 at 15:11
up vote 0 down vote

bit change in your code

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

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

share|improve this answer
up vote -1 down vote

Just a note as I had the same issue -

I needed to wrap the script in an <apex:outputPanel> in the page to make this work.

share|improve this answer
    
This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. –  mast0r Jan 14 at 7:04
    
@mast0r it's not a different question, it is an addition to an answer –  Novarg Jan 14 at 7:17
    
GeorgeForce, explaining how that makes a difference will add quality to your answer! –  Samuel De Rycke♦ Jan 14 at 8:15
    
I tried to use the outputText however this did not seem to work for me - at this stage I do not know why. I changed it to outputPanel and the rerender worked. @Novarg You are correct - this is an addition to the answer :) –  GeorgeForce Jan 15 at 22:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.