reRender problem: variable changes in controller, but not on the VF page

Question

(I am building upon this question and the helpful answers there: Re-rendering section on picklist value change - picklist value is always null.)

Requirement: On a Visualforce page, I have a picklist (apex:selectOption). When a user selects certain values, additional input fields have to appear. Otherwise, they should be hidden.

Implementation: The additional fields are in a pageBlockSection and a Boolean variable in rendered controls it's visibility. The onchange action on the picklist calls an actionFunction actUpdateUnlockFieldsVisibility which calls the controller method updateUnlockFieldsVisibility() which updates the Boolean variable unlockFieldsVisibility. The actionFunction's reRender should refresh a PageBlockSection that contains the additional input fields.

Problem: The variable is updated correctly in the controller extension (I see this in the debug log), but it is not updated in the Visualforce page. Basically, reRender in the actionFunction does not do anything. (I also tried having the actionRegion only around the PageBlockSection, but this did not change the behavior.) Any hints?

The page:

<apex:page standardController="CaseCard__c" extensions="CardExtension" recordSetVar="caseCards">
    <apex:form>
        <apex:actionFunction action="{!updateUnlockFieldsVisibility}" name="actUpdateUnlockFieldsVisibility" reRender="unlockFields" focus="unlockReasonPicklist"/>
        <apex:pageMessages />
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton action="{!issueInstruction}" value="Set Instructions"/>
            </apex:pageBlockButtons>
                    <apex:actionRegion>
                        <apex:selectList value="{!newInstruction}" multiselect="false" size="1" onchange="actUpdateUnlockFieldsVisibility()">
                            <apex:selectOptions value="{!instructions}"/>
                        </apex:selectList>
                        <apex:outputText>unlockFieldsVisibility: {!unlockFieldsVisibility}</apex:outputText>
                        <br/>
                        <apex:outputText>newInstruction: {!newInstruction}</apex:outputText>
                        <apex:pageBlockSection id="unlockFields" rendered="{!unlockFieldsVisibility}">
                            <apex:selectList value="{!newUnlockReason}" multiselect="false" size="1" id="unlockReasonPicklist">
                                <apex:selectOptions value="{!unlockReasons}" />
                            </apex:selectList>
                            <apex:inputTextarea value="{!newUnlockComment}" id="unlockComment"/>
                        </apex:pageBlockSection>
                    </apex:actionRegion>
            <apex:pageBlockTable value="{!cards}" var="card">
                [...]
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

The controller extension:

public with sharing class CardExtension {
    public String newInstruction { get; set; }
    public String newUnlockReason { get; set; }
    public String newUnlockComment { get; set; }
    public Boolean unlockFieldsVisibility { get; set; }

    private Case currentCase;
    private ApexPages.StandardSetController standardController;

    public CardExtension(ApexPages.StandardSetController standardController) {
        this.standardController = standardController;
        unlockFieldsVisibility = false;
    }

    public PageReference updateUnlockFieldsVisibility() {
        System.debug('>>>> newInstruction: ' + newInstruction);
        System.debug('>>>> unlockFieldsVisibility: ' + unlockFieldsVisibility);
        //if unlock, show unlock reason picklist + unlock comment
        if (newInstruction.containsIgnoreCase('unlock')) {
            unlockFieldsVisibility = true;
        } else {
            unlockFieldsVisibility = false;
        }
        System.debug('>>>> unlockFieldsVisibility: ' + unlockFieldsVisibility);
        return ApexPages.currentPage();
    }

    //sets the selected instruction on all cards
    public PageReference issueInstruction() {
        //get the instruction and check if it is empty
        if (String.isEmpty(newInstruction)) {
            ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'The instruction is empty.'));
            return ApexPages.currentPage();
        }
        //business logic here
        return ApexPages.currentPage();  
    }
}

Answer 1

The issue here is you are trying to rerender a section which was previously not rendered on the page. "Rerender" attributes only renders those sections or panels which were rendered on the page initially or before the ajax request.

So you would have to rerender the "Apex:pageBlock" or put your selectList inside an outputPanel like this:

<apex:pageBlockSection id="unlockFields" >
      <apex:outputPanel rendered="{!unlockFieldsVisibility}">
                            <apex:selectList value="{!newUnlockReason}" multiselect="false" size="1" id="unlockReasonPicklist">
                                <apex:selectOptions value="{!unlockReasons}" />
                            </apex:selectList>
                            <apex:inputTextarea value="{!newUnlockComment}" id="unlockComment"/>
       <apex:outputPanel>
 </apex:pageBlockSection>

Answer 2

The quick thing you can do it. Put the unlockFields id to parent container `PageBlock' as:

 <apex:pageBlock id="unlockFields">
        <apex:pageBlockButtons >
            <apex:commandButton action="{!issueInstruction}" value="Set Instructions"/>
        </apex:pageBlockButtons>
                <apex:actionRegion>
        ......
 </<apex:pageBlock>

Answer 3

Wrap your pageblocksection inside an outputpanel. Set it as always rendering. Based on your logic from the action function, re render the new outputpanel.

<apex:actionFunction action="{!updateUnlockFieldsVisibility}" name="actUpdateUnlockFieldsVisibility" reRender="panelUnlockFields" focus="unlockReasonPicklist"/>

<!-- more codes -->

<apex:outputPanel id="panelUnlockFields">
    <apex:pageBlockSection id="unlockFields" rendered="{!unlockFieldsVisibility}">
        <apex:selectList value="{!newUnlockReason}" multiselect="false" size="1" id="unlockReasonPicklist">
            <apex:selectOptions value="{!unlockReasons}" />
        </apex:selectList>
        <apex:inputTextarea value="{!newUnlockComment}" id="unlockComment"/>
    </apex:pageBlockSection>
</apex:outputPanel>

Answer 4

With the help of a friend his minimal working template, I was able to build a version that works. The controller extension is basically the same. I did not find out what actually caused the page not to work in the first place.

Here is the working version of my page:

<apex:page standardController="CaseCard__c" extensions="CardExtension" recordSetVar="caseCards" tabStyle="Card__c">
    <apex:form >
        <apex:pageMessages />
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton action="{!issueInstruction}" value="Set Instructions"/>
            </apex:pageBlockButtons>
            <table>
                <tr>
                    <td style="width:100px">New instruction:</td>
                    <td>
                        <apex:selectList value="{!newInstruction}" multiselect="false" size="1">
                            <apex:selectOptions value="{!instructions}"/>
                            <apex:actionSupport event="onchange" rerender="unlockFields" action="{!updateUnlockFieldsVisibility}" focus="unlockReasonPicklist"/>
                        </apex:selectList>
                    </td>
                </tr>
            </table>
            <apex:outputPanel id="unlockFields">
                <apex:outputPanel rendered="{!unlockFieldsVisibility}">
                    <apex:selectList value="{!newUnlockReason}" multiselect="false" size="1" id="unlockReasonPicklist">
                        <apex:selectOptions value="{!unlockReasons}" />
                    </apex:selectList>
                    <apex:inputTextarea value="{!newUnlockComment}" id="unlockComment"/>
                </apex:outputPanel>
            </apex:outputPanel>
            <br/>
            <apex:pageBlockTable value="{!cards}" var="card">
[...]
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Instead of the inner apex:outputPanel (with the rendered parameter), an apex:pageBlockSection also works.

Answer 5

The problem with the code is that you are using one page block section (id and rendered attributes are set there). Basically you are trying to re-render something that not exists(because the first value of the Boolean variable is false).

In order to fix this issue, you need to use two output panels. First panel will be with the id, and the second one with the rerender attribute.

Here is the example:

<apex:outputPanel id="sectionToBeRerendered" >
    <apex:outputPanel rendered="{!rerenderBoolean}">
    <!-- code here -->
    </apex:outputPanel>
</apex:outputPanel>