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(){
        document.getElementById('pg:frm:pb:pbs:pbs2:ssnId').disabled = false; 

    function doRefreshAndClose(pageMsgRendered){




  <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: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 id="pbs2" >

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


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');
      //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){
         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() {


        update account;

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

    }catch(Exception e){
        system.debug('exception at'+e);
            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.

1 Answer 1


Added an funtion

    $j = jQuery.noConflict();  
    function dummyClick()
      return true;

<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" />

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .