inlineEditSupport not working for components which are not rendered when page is loaded

Question

I have a page with fields sorted out in a couple of pageBlocks. Some blocks start off hiden (rendered=false) and are only rendered if the user click some button. The fields use inlineEditSupport with the Cancel and Save buttons appearing if inline edit was done. Problem is that these Cancel and Save buttons only appear when I inline edit fields in pageBlocks which are rendered initially and not for fields in pageBlocks which start off hidden and appear only after some user action. Any idea why this is happening and how to fix this?

In the below snippet boolHeaderSection start as true and which for inlineEdit is working while boolDetailSection start as false and only after user action turns to true and which for inlineEdit is not working

<apex:pageBlock mode="inlineEdit">
 <apex:facet name="header">
  <apex:outputPanel id="pageBlockHeader">                                
    <apex:outputText value="{!Item__c.Name}" id="titleHeader"/>                     
    <apex:outputPanel layout="inline" id="headerButtons">
      <apex:commandButton value="Approve Edits" rerender="theTabPanel" id="approveButton"/>
      <apex:commandButton value="Edit" id="editButton" action="{!urlFor('/'+Portfolio_Catalog_Item__c.Id+'/e', null, [retURL='/apex/NicePortfolioCustomDetail?Id='+Portfolio_Catalog_Item__c.Id])}"/>
      <apex:commandButton value="Delete" action="{!deleteCatalogItem}" id="deleteButton"/>
      <apex:commandButton value="Clone" id="cloneButton" action="{!urlFor('/'+Portfolio_Catalog_Item__c.Id+'/e?clone=1', null, [retURL='/apex/NicePortfolioCustomDetail?Id='+Portfolio_Catalog_Item__c.Id])}"/>
      <apex:commandButton action="{!saveCatalogItem}" id="saveButton" value="Save" rerender="pageBlockHeader, theTabPanel" style="display:none"/>
      <apex:commandButton id="cancelButton" value="Cancel" style="display:none"/>

    </apex:outputPanel>
   </apex:outputPanel>
  </apex:facet>

  <apex:outputPanel>
    <apex:panelGrid columns="2">
      <apex:panelGroup>

      </apex:panelGroup>

      <apex:pageBlock>
        <apex:pageBlock title="Header" rendered="{!boolHeaderSection}">
          <apex:pageblocksection columns="1">
            <apex:outputField value="{!Item__c.edit_Valu__c}">
               <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" event="ondblclick" hideOnEdit="editButton, approveButton, deleteButton, cloneButton"  changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
            </apex:outputField>
          </apex:pageblocksection>
        </apex:pageBlock>
        <apex:pageBlock title="Description" rendered="{!boolDetailSection}">
          <apex:pageblocksection columns="1">
            <apex:outputField value="{!Item__c.Price__c}">
              <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" event="ondblclick" hideOnEdit="editButton, approveButton, deleteButton, cloneButton"  changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
            </apex:outputField>
          </apex:pageblocksection>
        </apex:pageBlock>
      </apex:pageBlock>
    </apex:panelGrid>
  </apex:outputPanel>

Answer 1

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