How can an apex:pageBlockSection be rerendered if it originally has a render value of false?

Question

I am having trouble getting an apex:pageBlockSection to rerender from an apex:actionFunction call if the section is initially not rendered.

My goal is to initially hide a section when the page is rendered, but once the action function is called, I would like for the hidden section to render to the page.

When reviewing the Debug logs, I can see that the toggle variable seems to have the correct value (false for the first pass, and true once the action function completes).

I have provided a simplified version of what my page and class look like.

Extension Class

public with sharing class CustomObjectExtension
{
    private Boolean theToggleVal = false;
    public Boolean ParamToggle { get; set; }

    public void DoToggle() {
        theToggleVal = ParamToggle;
    }

    public Boolean ShouldDisplay {
        get {
            System.Debug(theToggleVal);
            return theToggleVal;
        }
    }
}

Visualforce Page

<apex:page standardController="CustomObject__c" extensions="CustomObjectExtension">
    <script src="/soap/ajax/20.0/connection.js" type="text/javascript"></script>
    <apex:form>
        <apex:actionFunction name="ToggleSection" action="{!DoToggle}" rerender="theDynamicSection" immediate="true">
            <apex:param name="ParamToggle" assignTo="{!ParamToggle}" value="" />
        </apex:actionFunction>
        <apex:pageBlock title="Personal Card Edit" mode="edit" id="thePageBlock">
            <apex:pageBlockSection collapsible="false" columns="1" title="Always Visible Section">
                <apex:pageBlockSectionItem>
                    <apex:outputPanel>

                        <div onclick="callToggleSection()">Click Me</div>
                        <script type="text/javascript">
                            function callToggleSection()
                            {
                                ToggleSection(true);
                            }
                        </script>

                    </apex:outputPanel>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>

            <apex:pageBlockSection collapsible="false" columns="1" title="The Dynamic Section" id="theDynamicSection" rendered="{!ShouldDisplay == true}">
                <apex:OutputPanel>
                    <div>Now you see me</div>
                </apex:OutputPanel>
            </apex:pageBlockSection>
    </apex:form>
</apex:page>

How can an apex:pageBlockSection be rerendered if it originally has a render value of false?

Answer 1

I've found before that if it's set to false when the page first renders then the element doesn't actually exist, so it's not technically a valid rerender target.

I've found the easiest way is to wrap your block in another element and rerender that instead:

<apex:variable var="v" value="" id="rerenderThis">
    <apex:pageBlockSection collapsible="false" columns="1" title="The Dynamic Section" id="theDynamicSection" rendered="{!ShouldDisplay == true}">
        <apex:OutputPanel>
            <div>Now you see me</div>
        </apex:OutputPanel>
    </apex:pageBlockSection>
</apex:variable>

Answer 2

Wrap your pageblocksection in a div with the id="theDynamicSection". This allows you to do the rerender independent of the rendered formula result.

Answer 3

Wrapping the apex:pageBlockSection works well, like others have suggested. However, I've also seen cases in Visualforce where the rendered attribute, especially in conjunction with ==, >, or < operators performs unexpectedly. I would modify your rendered attribute to be just {!ShouldDisplay} or if you could go one step further with {!IF(ShouldDisplay,true,false)}