[SalesForce] Inline edit support not working with rerender

While discussing a problem with inlineEdit I came across a interesting bug. The inlineEdit supports show and hide feature actually breaks when a rerender is done.

So here is a sample code

<apex:page standardController="Contact">
<apex:form id="frm" >

    <apex:pageBlock mode="inlineEdit" id="pb">
            <apex:commandButton value="Rerender" rerender="frm"/>
            <apex:commandButton id="editButton" value="Edit"/>
            <apex:commandButton id="saveButton" value="Save" style="display: none;"/>                
            <apex:commandButton id="cancelButton" value="Cancel" style="display: none;"/>
        <apex:pageBlockSection >
            <apex:outputField value="{!contact.lastname}">
                    <apex:inlineEditSupport showOnEdit="saveButton,cancelButton" 
                    hideOnEdit="editButton" event="ondblclick" 
                    changedStyleClass="myBoldClass" />
            </apex:outputField>
            <apex:outputField value="{!contact.accountId}"/>
            <apex:outputField value="{!contact.phone}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>

With this code if you directly go ahead and do a inline edit on a field the fields will appear in input mode and the buttons Edit,Save,Cancel will appear and disappear accordingly

So

Edit Mode : Save Button and Cancel Button
ReadOnly Move : Edit Button

Now if I press the rerender button(which just rerenders the form) the inline edits "showOnEdit" and "hideOnEdit" will stop working.

Is this is a possible bug ?
Or am doing something wrong?

Best Answer

Having re-created this page, and followed the steps you have described extensively, if this was a bug (asked Jun '13) it is now definitely fixed.

In read mode:

In read mode

and in edit mode:

in edit mode

Regardless of use of the re-render button.

Always nice to see a bug squashed!

Related Solutions

[SalesForce] How to correctly use apex:inlineEditSupport showOnEdit hideOnEdit attributes

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.

<apex:pageBlock >
    <apex:pageBlockButtons >
        <apex:commandButton action="{!save}" id="saveButton" value="Save" style="display:none"/>
        <apex:commandButton action="{!cancel}" id="cancelButton" value="Cancel" style="display:none"/>
        <apex:commandButton action="{!cancel}" value="Back to Record" id="backButton"/>
    </apex:pageBlockButtons>
    <apex:pageBlockSection columns="1">
        <apex:outputField value="{!account.name}">
            <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" 
                hideOnEdit="backButton"
                event="ondblclick"/>
        </apex:outputField>
    </apex:pageBlockSection>
</apex:pageBlock>

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.

[SalesForce] inline edit support not working

I have also faced the same issue. You can resolve this by first changing the focus of the Inline Edit to some other element (say a hidden input type). This will send your updated value back to the controller.

Try the below updated code.

Page:

<script>
function callMyFunc(){
   document.getElementById('focusMe').click();
   actionFuncToUpdate();    
 }
</script>
<apex:actionFunction action="{!saveCatalogItem}" name="actionFuncToUpdate"/>
<input type="text" id="focusMe" style="display:none" />
<apex:commandButton onClick="callMyFunc();return false;" id="saveButton" value="Save" style="display:none"/>    

    <apex:pageBlockSection columns="2">
       <apex:outputField value="{!Portfolio_Catalog_Item__c.edit_Short_Name__c}">
             <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" event="ondblclick" hideOnEdit="editButton, approveButton, deleteButton, cloneButton" changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
        </apex:outputField>
    <apex:pageBlockSection columns="2">

Controller Extension:

public pageReference saveCatalogItem() {
       try {
           update currentCatalogItem;
       }
       catch(Exception e){
           ApexPages.addmessage(new ApexPages.message(ApexPages.severity.Error, e.getMessage()));
       }
       return null;
}

Hope this helps.

Related Topic