1

I'm using a visual force page with an extended controller. When I click on the 'Save Only' button the page reloads to the top. How can I keep the focus on the field that a user was on prior to saving ? I am using the save action on the standard controller, not the extended controller. Below is my javascript and visual force snippet where the command button is calling the functions.

Any ideas as to why the page does not scroll down to the last field where the cursor was ?

<script src="/soap/ajax/30.0/connection.js" type="text/javascript"></script>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" />
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" />
<script>
    var fileldId;
    function oncfoucs(){
        debugger;
       fileldId = $(document.activeElement); 
    }
function focusComplete(){
    fileldId.focus();
}
</script>

............

<apex:outputPanel style="text-align:center" layout="block">
<apex:commandButton styleClass="myClass" action="{!save}" value="Save Only" />
<apex:commandButton styleClass="myClass" action="{!saveAndReturn}" value="Save and Return to Template" />
<apex:commandButton styleClass="myClass" action="{!ReturnMe}" value="Audit Template Screen" />
<apex:commandButton styleClass="myClass" action="{!save}" value="Save Test" onmouseover="oncfoucs();" oncomplete="focusComplete();" />

</apex:outputPanel>

</apex:pageBlockSection>

............

<apex:outputPanel id="ajaxrequest2">

<!-- OPERATIONS  -->

<!-- <apex:pageBlockSection columns="1" id="section2" title="Operations" rendered="{!RatingInformation=true}"> -->
<apex:pageBlockSection columns="1" id="section2" title="Operations" rendered="{!Operations}" >

<apex:actionRegion >
<apex:pageBlockSection columns="1" showHeader="false"  >
<apex:inputField value="{!Comm_Auto_Audit_Sample_Policy__c.Type_of_Operations__c}" id="operation" rendered="{!TypeOfOperations}" > 
    <apex:actionSupport event="onchange" reRender="typeOperation" />
    </apex:inputField> 
</apex:pageBlockSection> 
</apex:actionRegion>     

<apex:outputPanel id="typeOperation">    
<apex:pageBlockSection columns="1" showHeader="false" rendered="{!TypeOfOperations}" >  
<apex:inputField value="{!Comm_Auto_Audit_Sample_Policy__c.Service_Operation__c}" rendered="{!Comm_Auto_Audit_Sample_Policy__c.Type_of_Operations__c='Service' && TypeOfService}" />

1 Answer 1

2

This will need some adept javascript programming. I'm hereby providing a high level solution, considering you will be able to implement the same.

  1. You can create a String property in extension controller.
  2. Bind this property with a hidden control "id = hdnFocusedElement" (let's say a text box) on VF Page.
  3. For all controls (use jQuery for ease), add "onfocus" event handler, wherein the id of focued field will be set as value of hidden control "hdnFocusedElement"
  4. Create a javascript which works on page load (jQuery will again help here), and check if there is any value in "hdnFocusedElement" element, then set focus of the id present in value of "hdnFocusedElement" element.
2
  • Understand but doesn't the oncomplete event on the command button do just this ?
    – rickmac
    Commented Oct 1, 2015 at 3:41
  • @rickmac: I may not have understood your question correctly. But, "oncomplete" works only in case of AJAX implementation, wherein whole page is not rendered. I can't really recall as of now, if by default AJAX operation will bring back focus to previously focused element (I doubt it). But the mechanism explained above is more in relation to complete page submit and reload.
    – Anshul
    Commented Oct 1, 2015 at 15:51

You must log in to answer this question.

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