javascript pulling controller property value

Question

My main problem is: my javascript 'm' variable does not pull the content of 'message' controller property. Please consider the code below. It is a reduced version of my original code:

GrettingPage.page:

<apex:page controller="GrettingController" docType="html-5.0" showHeader="true" sidebar="true">
<script>
    function processReturn() {
        var m = '{!message}';
        alert(m);
    }
</script>
    <apex:sectionHeader title="composeMessage test" subtitle="Gretting" />
    <apex:form>
        <apex:pageBlock mode="maindetail">
            <apex:messages />
            <apex:pageBlockButtons >
                <apex:commandButton action="{!composeMessage}" reRender="opResult" oncomplete="processReturn()"/>
            </apex:pageBlockButtons>

            <apex:pageBlockSection>
                <apex:pageBlockSectionItem>
                    <apex:outputLabel value="Your name" for="uName"></apex:outputLabel>
                    <apex:inputText value="{!uName}" id="uName" size="20"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>

            <apex:pageBlockSection columns="1">
                <apex:pageBlockSectionItem>
                    <apex:outputPanel id="opResult">

                    </apex:outputPanel>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

GrettingController.cls:

public with sharing class GrettingController{
    public String uName {get;set;}
    public String message {get;set;}

    public GrettingController() {

    }

    public PageReference composeMessage() {
        message = 'Welcome ' + uName;
        system.debug(message);
        return null;
    }
}

Does anybody have any suggest to solve it?

Thanks in advance.

Answer 1

When the Page loads it sets the value using the Merge field. When the value changes in the controller the script still holds the original value.

To fix this you can rerender the script block as so:

<apex:outPutPanel id="scriptBlock">

<script>
    function processReturn() {
        var m = '{!message}';
        alert(m);
    }
</script>

</apex:outPutPanel>

Then you can modify your command button as so:

<apex:commandButton action="{!composeMessage}" reRender="opResult" 
    oncomplete="processReturn()" rerender="scriptBlock"/>

Answer 2

It is a typical example of how reRendering works in VF pages.

You will need to put the javascript code in an outputpanel which can be reRendered using the reRendering property of your commandbutton.

<apex:outputpanel id="messageProcessingPanel">
    <script>
    function processReturn() {
        var m = '{!message}';
        alert(m);
    }
    </script>
<apex:outputpanel

And add this panel id in the reRender Property of the command button.

All the sections of the vf page which are not reRendered, are constructed from the local state of VF page and will not display latest content.