4

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>
  • When you rerender, are you rerendering the entire pageBlock? – Michael Welburn Dec 27 '13 at 13:57
  • 1
    Can you please post the VF page (or a snippet of it), so that we can help you? – James Loghry Dec 27 '13 at 14:08
  • I posted a snippet of the relevant code. Any ideas? – Dedo Jan 2 '14 at 7:51
  • When you say inline edit is not working, can you be more specific? Is nothing happening when you double-click? Or is it partially working but something specific is failing? – Tim Smith Jan 3 '14 at 19:56
  • Any luck with what I posted below? – Tim Smith Jan 6 '14 at 0:14
4
+100

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 The page with top section showing

Inline-editing field in top section works fine Inline-editing field in top section works fine

Clicking "Show Detail" button to render bottom section Clicking "Show Detail" button to render bottom section

And inline-editing field in bottom section works fine enter image description here

| improve this answer | |
  • 1
    Thanks, so this only works if the whole page is refreshed? – Dedo Jan 3 '14 at 23:19
  • Yes, refreshing the whole page is the only way I can see to get the buttons to show/hide properly on doubleckick of the rendered field. Other then the fact the page refreshes, it shouldn't impact your viewstate or other page functionality significantly, though. – Tim Smith Jan 3 '14 at 23:41

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.