How to cancel form ajax way?

Question

I have a page linking with a custom object. If you click on the edit link you can edit and update the custom object. I want to do all of this by just rerender a section without redirecting to another page. for one of fields I have validation applied so that the value can has to be number not character. The problem I have is whenever I hit save although there is a validation error or not the field is udpated in the form so if I go back to the read only mode by canceling the form the value is udpated. However if I refresh the whole site it goes back to the original state. Here is the code.

page

<apex:form>

<apex:outputpanel id='sectionA'>
<apex:ActionRegion>
 <apex:commandLink value="Edit" reRender="sectionA" >
      <apex:param name="editModeToggle"  value="true" assignTo="{!isEditMode }"/>
 </apex:commandLink>

<apex:outputField value="{!Job__c.fieldA}" rendered="{!Not(isEditMode)}" />
<apex:inputField value="{!Job__c.fieldA}" rendered="{!isEditMode }"/>

<apex:outputField value="{!Job__c.fieldBwithvalidation}" rendered="{!NOT(isEditMode)}"/>
<apex:inputField value="{!Job__c.fieldBwithvalidation}" rendered="{!isEditMode}"/>

<apex:commandbutton action="{!ajaxSave}" value="Save" reRender="sectionA" rendered="{!isEditMode}" />
 <apex:commandbutton action="{!ajaxCancel}" immediate="true" value="Cancel" reRender="sectionA" rendered="{!isEditMode}" />
</apex:actionRegion>

<apex:outputpanel id='sectionB'>
<apex:ActionRegion>
 <apex:commandLink value="Edit" reRender="sectionB" >
      <apex:param name="editModeToggle"  value="true" assignTo="{!isEditMode }"/>
 </apex:commandLink
<apex:outputField value="{!Job__c.fieldC}" rendered="{!Not(isEditMode)}" />
<apex:inputField value="{!Job__c.fieldC}" rendered="{!isEditMode }"/>

<apex:outputField value="{!Job__c.fieldDwithvalidation}" rendered="{!NOT(isEditMode)}"/>
<apex:inputField value="{!Job__c.fieldDwithvalidation}" rendered="{!isEditMode}"/>
</apex:actionRegion>
<apex:commandbutton action="{!ajaxSave}" value="Save" reRender="sectionB" rendered="{!isEditMode}" />
 <apex:commandbutton action="{!ajaxCancel}" immediate="true" value="Cancel" reRender="sectionB" rendered="{!isEditMode}" />
</action:region>
</apex:form>

extension controller

public with sharing class MyControllerExtension { 
public Custom__c customObject;    

public MyControllerExtension (ApexPages.StandardController controller){
   customObject = (Custom__c )controller.getRecord();
}

function ajaxSave(){
   update customobject;
   isEditMode = false;
   return null;
}
function ajaxCancel(){
   isEditMode = false;
   return null;
}
}

I tried to use standard controller cancel() function on ajaxCancel but the result is still the same. How can I make it so that when I click on cancel it goes back to original state.

Answer 1

You have two basic options:

1. Reload the page. Since you're using AJAX, it seems like you'd want to not do this, since it would defeat the purpose of a slick no-refresh UI. But you could just return a page reference to the same page, with redirect set to true to force reloading the page, and thus the values.

2. Reload the initial state on cancel. Have ajaxCancel perform a query on the record to reload the latest values. You'll have to copy each field from the queried result back to the original object (customObject) in order to allow a future edit session to work correctly.