[SalesForce] Visualforce still sees the old controller variable value even after update

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?

Best Answer

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