Double click on apex:outputtext and show inputfield how can i implement this

Question

VisualForce Page:

<apex:page standardController="Account" extensions="InlineEditingHelper">
  <apex:form>
    <apex:pageBlock title= "outputcomponents">
        <apex:outputPanel id="editfield">
            <apex:outputlabel value="Account Name (Double Click To Edit)   :  " for="Accname">
                <apex:actionSupport event="ondblclick" action="{!inlineEdit}" rerender="editfield"/>
            </apex:outputlabel>         
            <apex:outputText label="" value="{!Account.Name}" rendered="{!NOT(editmode)}" id="Accname"/>
            <apex:inputText label="" value="{!Account.Name}" rendered="{!editmode}" id="Accname2"/> 
        </apex:outputPanel>      
    </apex:pageBlock >
  </apex:form>
</apex:page>

Controller Extension

public with sharing class InlineEditingHelper {
    public boolean editmode {get;set;}
    public InlineEditingHelper(ApexPages.StandardController controller) {
        editmode = false;
    }
    public void inlineEdit() {
        system.debug('entered here');
        editmode = true;
    }
}

I got this code but not able to implement it on my reference

Answer 1

Efficient way to use actionsupport

Documentation:

public class InlineEditingHelper {

public String strName {get;set;}
public Boolean isEditable {get; private set;}

public InlineEditingHelper ()
{
 strName  = 'Test 1';
 isEditable = true;
}

public void changeEditable(){
  isEditable = isEditable ? false:true;
}
}

VF page

<apex:page Controller="InlineEditingHelper">
    <apex:form id="frm">
        <apex:pageBlock  id="pblock">

            <apex:pageBlockSection id="pbsection">
                <apex:outputpanel id="counter">
                   <apex:outputText value="{!strName }" rendered="{!isEditable }"/>
                   <apex:actionSupport event="ondblclick" action="{!changeEditable}"
                      rerender="frm" />
                </apex:outputpanel> 
                <apex:InputText value="{!strName }" rendered="{!!isEditable }">
                <apex:actionSupport event="ondblclick" action="{!changeEditable}"
                      rerender="frm" />
                </apex:InputText >
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Answer 2

try this way

<apex:page standardController="Account" extensions="InlineEditingHelper">
  <apex:form>
     <script>
          function dblClick(){
              inEdit();
          }
      </script> 
    <apex:actionFunction name="inEdit" action="{!inlineEdit}" rerender="editfield" />  
    <apex:pageBlock title= "outputcomponents">
        <apex:outputPanel id="editfield">
            <apex:outputlabel value="Account Name (Double Click To Edit)   :  " />
            <apex:outputPanel id="editfieldIn" ondblclick="dblClick();" >
                <apex:outputText label="" value="test" id="Accname" rendered="{!NOT(editmode)}"/>
            </apex:outputPanel>
            <apex:inputText label="" value="{!Account.Name}" id="Accname2" rendered="{!editmode}"/> 
        </apex:outputPanel>  

    </apex:pageBlock >
  </apex:form>
</apex:page>