Inline editing not working properly as it should

Question

I have a requirement to show a VF page with just 2 fields, on one field i want to have inline edit functionality. My VF page is as below :-

 <apex:page Controller="ssnEditController" id="pg" showHeader="false" sidebar="false" title="View Account" > 
    <script src="{!$Resource.jquery}"></script>
    <apex:includeScript value="{!$Resource.sw_util}"/>
    <script src="{!$Resource.jqueryjMaskedInput}"></script>
    <script src="{!$Resource.jqueryValidatePlugin}"></script>

<script type="text/javascript">
     var $j = jQuery.noConflict();


    function makeEditable(){
        //alert(document.getElementById('pg:frm:pb:pbs:pbs2:ssnId'));
        document.getElementById('pg:frm:pb:pbs:pbs2:ssnId').disabled = false; 
    }

    function doRefreshAndClose(pageMsgRendered){

      if(pageMsgRendered==false){ 
        window.opener.location.href="/{!$CurrentPage.parameters.id}";
        window.top.close(); 
      } 

  }



</script>

  <apex:pageBlock id="pb" mode="inlineEdit" >
        <apex:pageBlockButtons location="top" >             
            <apex:commandButton value="Close" style="margin-left:0%;" oncomplete="doRefreshAndClose({!pageMsgRendered});"/>
            <apex:commandButton id="editButton" value="Edit" disabled="{!editDisabled}" action="{!makeEditable}"/>
            <apex:commandButton id="saveButton" value="Save" style="margin-left:20%;"  disabled="{!editDisabled}" action="{!savePerName}"   reRender="pb,pageMsg" />

            <apex:commandButton id="cancelButton" value="Cancel"  onclick="resetInlineEdit()" rerender="pg"/>
        </apex:pageBlockButtons>
        <apex:pageMessages id="pageMsg" escape="false" />
        <apex:pageBlockSection id="pbs" columns="1" >
            <apex:pageBlockSectionItem id="pbs1">
                <apex:outputText >Name</apex:outputText>
                <apex:outputLabel value="{!name}" />
            </apex:pageBlockSectionItem>
            <br/>               
            <apex:pageBlockSectionItem id="pbs2" >

                <apex:outputField value="{!account.PerName__c}" id="perNameId" >
                    <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton" event="ondblclick" 
                        changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
                </apex:outputField>

            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>           

And below is my controller :-

public with sharing class  AccEditController {

    public String ssn { get; set; }
    public String id{get; set;}
public String name{get; set;}
public String screenType { get; set; }   

public Account account{get; set;}   
public boolean isDisable{get; set;}
public boolean editDisabled{get; set;}

//this is used to identify wheteher to redirect the page or not if any exception comes while processing.
public boolean pageMsgRendered { get; set; }


public AccEditController (){

  screenType = ApexPages.currentPage().getParameters().get('type');

  id =ApexPages.currentPage().getParameters().get('id');
  try{
      //Getting the name and SSN of the client based upon its record Id.
      account = [Select name, id, PerName__c,IsPersonAccount from account where id = :id limit 1];
      name = account.name;

  }catch(Exception ex){
      if(ApexPages.getMessages()==null){
         ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO,'No record found for this Client'));
      }

  }


}


/**
* This method updates the client with the new SSN entered by User.
*/
public void savePerName() {

    try{

        update account;

        pageMsgRendered = false;
        //system.debug('after update'+ acct );

    }catch(Exception e){
        system.debug('exception at'+e);
        if(ApexPages.getMessages()==null){
            ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR,'An exception occurred while updating.'));
        }
        pageMsgRendered = true;          
    }

 }


 /**
 * To make edit button enable or disable.
 */
 public void makeEditable() {

    isDisable = false;
 }

}

Now inline edit for my output field PerName is working but following are the issues that i am facing :- 1. When i dblClick on it and press save button immediately, the value is not getting updated in my controller, i have to click on the screen first then click on save button in order to save the updated vaue on the controller. I did checked the DOM of VF page and found out that the OnkeyPress listener is not associated with my output field which otherwise is associated when i checked on a standard detail page of account record. So how can i make sure that onkeyPress listener is associated with my field on edit. Should i use another way to implement inline editing. 2. When i click on the cancel button, the value is not setting to its previous value. it is showing the current value entered by user only. Am i missing something on the cancel button? Another thing i want is to on click of Edit button my inline editable will be made editable as we do in any standard detail page. I am newbie to salesforce, please help me on this.

Answer 1

Added an funtion

<script>           
    $j = jQuery.noConflict();  
    function dummyClick()
    {
      $j('body').click();
      return true;
    }             
</script>

<apex:commandButton onclick="dummyClick();" action="{!saveCompanyInfo}" />

Called it before sumit fires. In order to make this working you require to have jquery added in your VF Page.

<apex:page controller="onePage" tabStyle="Approvals__tab">
    <apex:includeScript value="https://code.jquery.com/jquery-1.10.2.min.js"/>
    <apex:includeScript value="https://code.jquery.com/ui/1.10.3/jquery-ui.js"/>
    <apex:stylesheet value="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />