How to correctly use apex:inlineEditSupport showOnEdit hideOnEdit attributes?

Question

Question

I'm trying out the apex:inlineEditSupport for the first time and am having some trouble getting the showOnEdit and hideOnEdit attributes to work. My codes is based on the example from the inlineEditSupport docs, but the when I double click a field to start inline editing the back to record button is NOT hidden, and the save/cancel buttons are NOT shown.

For comparison when you inline edit a field on the standard detail page the initial detail buttons are hidden and replaced with show/cancel buttons. My goal is to emulate the standard behavior with my page.

Code

<apex:pageBlock>
    <apex:pageBlockButtons >
        <apex:commandButton action="{!save}" id="saveButton" value="Save" rendered="false"/>
        <apex:commandButton action="{!cancel}" id="cancelButton" value="Cancel" rendered="false"/>
        <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>

Answer 1

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.