10

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?

19

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>
  • I wrapped my apex:pageBlockSection in an apex:outputPanel and it it worked great. Thanks! – Brad Ullery Aug 17 '12 at 13:26
4

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

  • 1
    Or apex:outputPanels. – Peter Knolle Aug 17 '12 at 1:53
  • @PeterKnolle Using the apex:outputPanel did the trick. Thanks for the tip. – Brad Ullery Aug 17 '12 at 13:30
1

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)}

  • Thanks for the suggestion. I had not seen the IF function before. – Brad Ullery Aug 17 '12 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.