How do I rerender a conditionally rendered pageBlockSectionItem?

Question

So - I have a page like this:

<apex:page >
    <apex:form >
        <apex:pageBlock id="pageBlock">
            <apex:pageBlockSection title="Some Text">
                <apex:inputField value="{!record.Description__c}" required="true">

                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Type"/>
                    <apex:actionRegion >
                        <apex:inputField value="{!record.Type__c}">
                            <apex:actionSupport action="{!typeChanged}" rerender="pageBlock" event="onchange"/>
                        </apex:inputField>
                    </apex:actionRegion>
                </apex:pageBlockSectionItem>

                <apex:pageBlockSectionItem rendered="{!record.Type__c = 'Special Value'}">
                    <apex:outputLabel value="Other Field"/>
                    <apex:inputField value="{!record.OtherField__c}"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form >
</apex:page>

Currently the user inputs some information into the first field - Description. Then the user selects the Type which will conditionally rerender the whole pageBlock eventually showing or hiding Other Field based on Type.

The problem with this is that every time I change the Type the Description will be emptied as it is rerendered as part of that operation. Instead of rerendering the whole pageBlock it would be nice if we could just rerender the last pageBlockItem.

I tried a lot but I just can't get it to work. Any advice?

Answer 1

Give the Id to apex:PageBlockSectionItem and the use that Id while rerendering the PageBlockItem.

id="sectionType"

<apex:pageBlockSectionItem rendered="{!record.Type__c = 'Special Value'}" id="sectionType" >
                    <apex:outputLabel value="Other Field"/>
                    <apex:inputField value="{!record.OtherField__c}"/>
                </apex:pageBlockSectionItem>

Below is the code for complete VF Page

<apex:page >
    <apex:form >
        <apex:pageBlock id="pageBlock">
            <apex:pageBlockSection >
                <apex:inputField value="{!record.Description__c}" required="true">

                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Type"/>
                    <apex:actionRegion >
                        <apex:inputField value="{!record.Type__c}">
                            <apex:actionSupport action="{!typeChanged}" rerender="sectionType" event="onchange"/>
                        </apex:inputField>
                    </apex:actionRegion>
                </apex:pageBlockSectionItem>

                <apex:pageBlockSectionItem rendered="{!record.Type__c = 'Special Value'}" id="sectionType" >
                    <apex:outputLabel value="Other Field"/>
                    <apex:inputField value="{!record.OtherField__c}"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form >
</apex:page>

Answer 2

I developed a solution and it is a bit "hacky (like many Salesforce solutions I guess) - but it works.

What I'm actually doing is splitting the pageBlockSection into two. Now I can just rerender the second section and it works as expected.

Sadly this solution has it's own drawbacks we need to overcome. First of all - your elements need to be structured in such a way that you can just "cut" it somewhere in between. For the second section you set no title and this basically already works as expected although it looks a little bit off.

What is missing is the separator line below the element where you cut it into two sections. Which makes sense as you normaly wouldn't want those between sections. To make it appear as we have only section we can make the last line of the first section just behave like a normal line and not like the last line in a section.

Long talk - short solution:

$j('#pageBlockSectionId').find('tr:last').children().removeClass('last');

Just remember that you have to escape your identifier for the section to use it (not in this example). And of course you need to re-do this after every rerender of this particular section. It also may flicker a bit but at least it looks almost exactly the same as before - just working this time.

Answer 3

Yes, you can do that like this way. Define apex:pageBlockSectionItem Id and in the rerender, render this Id.

<apex:pageBlockSectionItem id="pgbId">
    <apex:outputLabel value="Type"/>
    <apex:actionRegion >
        <apex:inputField value="{!record.Type__c}">
            <apex:actionSupport action="{!typeChanged}" rerender="pgbId,outputPanelId" event="onchange"/>
        </apex:inputField>
    </apex:actionRegion>
</apex:pageBlockSectionItem>
<apex:outputPanel id="outputPanelId">
    <apex:pageBlockSectionItem rendered="{!record.Type__c = 'Special Value'}" id="sectionType" >
        <apex:outputLabel value="Other Field"/>
        <apex:inputField value="{!record.OtherField__c}"/>
    </apex:pageBlockSectionItem>
</apex:outputPanel>

Since your second apex:pageBlockSectionItem is getting rendered based on condition, so wrap it inside apex:outputPanel and reRender the outputPanel.