Controller extension variable visibility question

Question

I don't know how to put this question, so I will just start with the code I have:

MyController.cls

global with sharing class MyController {
    public String variableOne{get;set;}

    public MyController(ApexPages.StandardController stdController) {
    }

    public PageReference methodTwo() {
        System.debug('Variable value from methodTwo is '+ variableOne); 
        return null;
    }

    public PageReference methodThree() {
        System.debug('variable value from methodThree is '+ variableOne);
        return null;
    }

    @RemoteAction
    global static String methodOne(String s1){
        return s1+'123';
    }

}

TestPage.page

<apex:page standardController="Account" extensions="MyController">
<c:ScriptsComponent id="scriptsComponent"/>
<script type="text/javascript">
    var records;
    function functionOne(){
        console.log('Entered the functionOne method');
        Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.MyController.methodOne}',
        'Andrew',
        function(result,event){
            console.log('result->' + JSON.stringify(result));
            records = result;
            if(event.status){
                console.log('result we got back from controller is '+records);
                setValueJS(records);
                methodOneJS();
            }
        });
    }
</script>

<div>
    <p onClick="functionOne(); return false;">Click Here</p>
    <apex:form >
        <apex:actionFunction name="setValueJS" action="{!methodTwo}">
            <apex:param name="parm1" assignTo="{!variableOne}" value=""></apex:param>
        </apex:actionFunction>
        <apex:actionFunction name="methodOneJS" action="{!methodThree}">
        </apex:actionFunction>
    </apex:form>
</div>
</apex:page>

Problem:

My Testpage is sending a variable to the methodOne in Controller and it returns the string by appending 123 and then I set this to a variable on the controller using methodTwo defined by actionFunction and then trying to retrieve this variable from methodThree..

But this is what happening:

1. I never see the debug line in methodTwo priting.
2. debug line in methodThree always says that the variable value is null
3. This might be javascript or jquery but the page reloads after i click on the p element

Answer 1

Notice that your @RemoteAction is static and hence cannot modify page state, which you are trying to access from your other methods. If you wish to modify page state, do not use a static method.

Answer 2

Use reRender="" attribute in methodTwo actionFunction like this :

<apex:actionFunction name="setValueJS" action="{!methodTwo}" reRender="">
        <apex:param name="parm1" assignTo="{!variableOne}" value=""></apex:param>
 </apex:actionFunction>

Try doing same with methodThree as well.

Answer 3

Finally I was able to find the solution..

What was happening is the below two lines are not executed in sequence.

            setValueJS(records);
            methodOneJS();

To solve this, I added onComplete attribute for the actionFunction 'setValueJS' to execute the methodOneJS

Not sure why it was running asynchronously.