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.
Best Answer
Added an funtion
Called it before sumit fires. In order to make this working you require to have jquery added in your VF Page.