2

I have a simple controller and VisualForce page as written below:

SampleCon.cls

    public with sharing class SampleCon {

    public Boolean buttonOneClicked {get; set;}

    public Boolean buttonTwoClicked {get; set;}

    public PageReference buttonOne(){

        this.buttonOneClicked = true;       
        return null;

    }

    public PageReference buttonTwo(){

        this.buttonTwoClicked = true;       
        return null;

    }

    public SampleCon(ApexPages.StandardController stdController) {
    }

    public void init() {
        this.buttonOneClicked = false;
        this.buttonTwoClicked = false;
    }
}

SampleConPage

<apex:page standardController="Account" extensions="SampleCon" action="{!init}">
<Script type="text/javascript">
    function printControllerValues(){
        console.log('Button One Clicked value is '+ '{!buttonOneClicked}');     
        console.log('Button Two Clicked value is '+ '{!buttonTwoClicked}');     
    }
    document.addEventListener("DOMContentLoaded", function(event) { 
        console.log('Button One Clicked value is '+ '{!buttonOneClicked}');     
        console.log('Button Two Clicked value is '+ '{!buttonTwoClicked}');     
    });       
</Script>
<apex:form >
    <apex:outputPanel id="first">
    <apex:pageBlock >
        <apex:pageBlockButtons >
            <apex:commandButton action="{!buttonOne}" value="Button One" onComplete="printControllerValues(); return false;"/>
            <apex:commandButton action="{!buttontwo}" value="Button Two" onComplete="printControllerValues(); return false;"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection >
        </apex:pageBlockSection>    
    </apex:pageBlock>
    </apex:outputPanel>
</apex:form>

Problem Description: I have two boolean variables in controller to check which button was clicked. As soon as the button is clicked I change the value to true and print the values from Javascript function using onComplete function. But every time, I see that buttonOneClicked and buttonTwoClicked variables are still showing false

Can somebody help on what I am doing wrong here?

5

You would need to rerender the Javascript functions so that the new values could be included from the controller.

Right now, while the values are changed on the controller, the existing definitions of your functions are still in the browser.

Try wrapping the <script> elements in something that you can rerender, such as an apex:outputPanel with a defined id. Then use that id in the rerender property of the commandButton.

<apex:outputPanel id="jsFunctions">
<Script type="text/javascript">
    function printControllerValues(){
        console.log('Button One Clicked value is '+ '{!buttonOneClicked}');     
        console.log('Button Two Clicked value is '+ '{!buttonTwoClicked}');     
    }
    document.addEventListener("DOMContentLoaded", function(event) { 
        console.log('Button One Clicked value is '+ '{!buttonOneClicked}');     
        console.log('Button Two Clicked value is '+ '{!buttonTwoClicked}');     
    });       
</Script>
</apex:outputPanel>

<apex:commandButton action="{!buttonOne}" value="Button One" 
      onComplete="printControllerValues(); return false;"
      rerender="jsFunctions"/>    
  • Thanks Daniel for your time. Can you tell me how to rerender the javascript function? – javanoob May 12 '15 at 23:57
0

Visualforce expressions (statements inside with '{! }') are evaluated every time that your page is rendered, including script blocks that use those expressions. This means that even if the values were updated in server side(your apex code), you won't see those changes unless you re-render the block of code that contains the expressions. For your case, '{!buttonOneClicked}' is not being re-rendered so you will keep receiving the old value that was rendered before you click the button.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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