Visualforce still sees the old controller variable value even after update

Question

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?

Answer 1

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"/>    

Answer 2

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.