[SalesForce] Rerender after apex:detail with inlineEdit is saved

The problem

I would like to give the user access to an <apex:detail> with inline editing enabled and let them modify the record. I also want to show a few fields from that record nearby. When the record is updated through the detail page, I want the fields to stay up to date.

Based on reading similar posts, it seems that the problem has to do with not requerying the records. Is there a way to do this without a controller or will I have to implement a controller just for this purpose?

What I've tried

I assumed that rerender would be my ticket, but it seems not. I'm confused by how rerender on <apex:detail> is supposed to work. According to the documentation:

This attribute only works if inlineEdit or showChatter are set to true.

I am writing a page with a list of a parent's child Cases. In this simplified version, I display each child's Priority. Then I provide a <apex:detail> component with inline editing enabled to allow the user to edit the first child. I set the rerender attribute on <apex:detail> to the id of the list of Priority strings.

Steps to reproduce

In the <apex:detail>, the user changes Priority from Medium to Low and press Save.

Expected Behavior

The <apex:outputPanel> with id="caseList" is refreshed and the first child Case's Priority now shows as "Low".

Actual Behavior

The first child Case's displayed Priority remains "Medium".

Code

I have the following in my VF page (standard controller):

<apex:page showHeader="false" sidebar="false" standardController="Case">
  <apex:outputPanel styleClass="case-list" layout="block" id="caseList" style="float:none;">
    <ol>
      <apex:repeat var="child" value="{!case.Cases}">
        <li>{!child.Priority}</li>
      </apex:repeat>
    </ol>
  </apex:outputPanel>
  <apex:detail rerender="caseList" 
               id="childDetail" subject="{!case.Cases[0].Id}" 
               inlineEdit="true" relatedListHover="true" 
               title="false"
               >
  </apex:detail>
</apex:page>

Best Answer

It may not be ideal, but I got somewhere that works.

After trying out Amr Ibrahim's advice, I used an <apex:actionFunction> element which re-renders the outputPanel. On the <apex:detail>'s oncomplete event, I call the JS method the actionFunction generates (the <apex:actionFunction> tag must be embedded in a <apex:form>).

So my changes were:

  • added an <apex:form>
  • added an <apex:actionFunction>
  • removed the rerender from the <apex:detail>
  • added an oncomplete attribute to the <apex:detail>

My resulting Visualforce that is working properly is something along these lines:

<apex:page showHeader="false" sidebar="false" standardController="Case">
  <apex:outputPanel styleClass="case-list" layout="block" id="caseList">
    <ol>
      <apex:repeat var="child" value="{!case.Cases}">
        <li>{!child.Priority}</li>
      </apex:repeat>
    </ol>
  </apex:outputPanel>

  <apex:form>
    <apex:actionFunction reRender="caseList" name="refresh" >
    </apex:actionFunction>
  </apex:form>

  <apex:detail oncomplete="refresh()" 
               id="childDetail" subject="{!case.Cases[0].Id}" 
               inlineEdit="true" relatedListHover="true" 
               title="false"
               >
  </apex:detail>
</apex:page>
Related Topic