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>
It's not terribly clear what the issue is. My best guess is that there is something wrong with your DOM and that's causing your rerender to break. Going off of your snippet you posted, I refactored the VF to clean up the DOM some, and changed the object to Account and used standard Account fields just so that it would work in my sandbox.
Also, I tested it first with a rerender on the "show details" button below. With rerendering, the field would show up ok and inline edititng worked, but the page block buttons would not show/hide appropriately. I took out the rerender and just let the "show details" button reload the whole page and that made it work properly.
Here is what my code looks like:
VF Page
<apex:page standardController="Account" extensions="accountExtension" id="thePage">
<apex:form id="theForm">
<apex:pageBlock id="theBlock">
<apex:pageBlockButtons>
<apex:commandButton action="{!edit}" value="Edit" id="editButton"/>
<apex:commandButton action="{!delete}" value="Delete" id="deleteButton"/>
<apex:commandButton action="{!clone}" value="Clone" id="cloneButton"/>
<apex:commandButton action="{!save}" value="Save" id="saveButton" style="display:none"/>
<apex:commandButton action="{!cancel}" value="Cancel" id="cancelButton" style="display:none"/>
<apex:commandButton action="{!showDetail}" value="Show Detail" id="showDetail"/>
</apex:pageBlockButtons>
<apex:pageBlockSection>
<apex:pageBlockSectionItem>
<apex:outputLabel>Phone</apex:outputLabel>
<apex:outputField value="{!Account.Phone}">
<apex:inlineEditSupport showOnEdit="saveButton, cancelButton" event="ondblclick" hideOnEdit="editButton, approveButton, deleteButton, cloneButton, showDetail" changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
</apex:outputField>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockSection rendered="{!boolDetailSection}">
<apex:pageBlockSectionItem>
<apex:outputLabel>Fax</apex:outputLabel>
<apex:outputField value="{!Account.Fax}">
<apex:inlineEditSupport showOnEdit="saveButton, cancelButton" event="ondblclick" hideOnEdit="editButton, approveButton, deleteButton, cloneButton, showDetail" changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
</apex:outputField>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Extension:
public class accountExtension {
public accountExtension(ApexPages.StandardController controller) {
}
public Boolean boolHeaderSection {get;set;}
{
this.boolHeaderSection = true;
}
public Boolean boolDetailSection {get;set;}
{
this.boolDetailSection = false;
}
public PageReference showDetail(){
this.boolDetailSection = true;
return null;
}
}
And in my testing, both inline edits function ok:
The page with top section showing
Inline-editing field in top section works fine
Clicking "Show Detail" button to render bottom section
And inline-editing field in bottom section works fine
Best Answer
The Save and Cancel buttons are not displayed or hidden because they are not sent to the browser, as you have used rendered="false" on them. If you want to display them hidden initially but still have the ability to display them when needed, you need to use the "style" attribute.
Regarding the use of style='display:none' above. I think having the buttons visible initially is OK (as per the Salesforce docs) so long as they perform something appropriate for the state of the page. Using 'style' then, is just that, a UI preference, if you prefer them not to be shown initially.