+ Start a Discussion
Alex Skempris9Alex Skempris9 

How to return to the same field after saving a VF page?

Hello

I've built a VF page along with a controller extension. This page is a long questionnaire that spans over four to five pages/screens that the users have to scroll through but once they hit the save button they get redirected back to the top of the page. I want the page to automatically scroll back to the place they were working at, much like a standard Salesforce record page does after refreshing. 

Here's a snippet of my VF page and save methods:

VF PAGE: 

<apex:pageBlock title="Properties" tabstyle="Mortgages__c">
           <apex:outputlabel style="color:red;font-style:italic;font-size:16px;white-space:pre;" value="Thank you for your responses so far, I’d now like to ask you some questions regarding your current address and your housing arrangements…."/>
           
           <apex:commandButton action="{!newProperty}" value="New Property" rendered="{!NOT(ISBLANK(Account.id))}"/>
           <apex:outputPanel id="propertyList"> 
                <apex:repeat value="{!Properties}" var="prop" >
                    <apex:pageBlockSection title="Property {!prop.name}"  columns="1" collapsible="true">
                     <apex:pageBlockSectionItem >
                              <apex:pageBlockSection columns="2">
                                <apex:outputField value="{!prop.Client__c}"/>
                                <apex:inputField value="{!prop.Joint_Client__c}"/>
                                <apex:inputField value="{!prop.Street__c}"/>
                                <apex:inputField value="{!prop.Town__c}"/>
                                <apex:inputField value="{!prop.Postcode__c}"/>
                                <apex:outputlabel style="color:Blue;font-style:italic;font-size:14px;" value="**Essential**"/>
                                <apex:inputField value="{!prop.Date_Acquired__c}" label="When did you purchase the property?"/>
                                <apex:inputField value="{!prop.Year_of_Build__c}" label="In what year was the property built?"/>
                              </apex:pageBlockSection>
                           </apex:pageBlockSectionItem>
                            <apex:commandButton value="Delete Property" action="{!deleteProperty}" rerender="propertyList">
                               <apex:param name="propertyIdent" value="{!prop.id}" assignTo="{!chosenpropertyId}"/>
                            </apex:commandButton>
                        </apex:pageBlockSection>
                </apex:repeat>
            </apex:outputPanel>
            </apex:pageBlock>

APEX CLASS:
public PageReference save()
    {
     Boolean result=true;
     PageReference pr=Page.myVFpage;
     if (null!=getAccount().id)
     {
      result=updateProperties();

     }
     else
     {
      pr.setRedirect(true);
     }
      
     if (result)
     {
        // call standard controller save, but don't capture the return value which will redirect to view page
        std.save();
           ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO, 'Changes saved'));
     }
        pr.getParameters().put('id', getAccount().id);
      
     return pr;
    }
SKSANJAYSKSANJAY
Hi Alexios,

I dont see the place from where the save method is being called from your VF page. Just remove the PageReference return type and use void in your save method. If you are using rerender in save method calling element then the page will not redirect you to top, it will retain the place where the save button is placed.

Let me know if you this doesnot help you.

Thanks,
Sanjay
Alex Skempris9Alex Skempris9
Thank for your reply Sanjay

Sorry I forgot the code snippet with the save method. Here it is:

<apex:pageBlock >
    <apex:pageMessages />
    <apex:form >
        <apex:pageBlock mode="mainDetail">
            <apex:pageBlockButtons location="Bottom" >
                <apex:commandButton action="{!save}" value="Save" />
                <apex:commandButton action="{!cancel}" value="Exit" />
            </apex:pageBlockButtons>
        </apex:pageBlock>

If I put rerender at the end of it I get redirected at the main account page. I've also tried with a void method and removed the ApexPages message but upon saving I still get back to the top.

What happens is that if you press "enter" the visualforce page is saved and redirects back to the top of the page. I wonder if by pressing enter I can stay at the exam same page height/field. (perhaps I could get the cursor to focus on the next field? Not sure how to do that either.)

Thanks
Alex
 
SKSANJAYSKSANJAY
Two things are there...
--> You can handle enter press event on your input field by
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />
<script>
        function runScript(){
             if(characterCode == 13) {
                   return false; // returning false will prevent the event from bubbling up.
                   //call apex method using action function, by calling it here
             }else{
                   return true;
             }
        }
​</script>
--> Or write a script to dynamically focus that field on page refresh. FYI
https://stackoverflow.com/questions/17500704/javascript-set-focus-to-html-form-element

If you post complete code in one place then I can look into it. Hope this will help you
 
Alex Skempris9Alex Skempris9

Hi SKSANJAY

I've triied but the javascript function doesn't do the trick unfortunately. Moreover it seems that if I put something on the onclick attribute for the button, it prevents the page from running the Save method. I've posted my VF page code below for reference. I've removed some of the fields to avoid cluttering. If I could get the screen ro scroll directly to the next field after saving it would be great.

          title="Financial Plan - Know Your Client and Preferences V4" sidebar="false" showHeader="false">

<br>
<div style="text-align:center;font-size: 30px;">
<apex:outputlabel value="Financial Plan - Know Your Client and Preferences V4"/>
</div>
</br>

<apex:pageBlock >
    <apex:pageMessages />
    <apex:form >
        <apex:pageBlock mode="mainDetail">
            <apex:pageBlockButtons location="Bottom" >
                <apex:actionFunction name="SaveJave" action="{!save}"/>
                <apex:commandButton action="{!save}" value="Save Changes"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
         
<!-- Account Block -->      
           <apex:pageBlock title="Account Details">                  
            <apex:pageBlockSection columns="1">
            <apex:outputlabel style="color:red;font-style:italic;font-size:16px;white-space:pre;" value="We'll start with some basic personal details about you and your spouse/partner and how we can contact you. Could I ask you…"/>
            </apex:pageBlockSection>    
            <apex:pageBlockSection title="Account Contact Details" collapsible="true" id="mainRecord" columns="2" >
            <apex:pageBlockSection columns="1">
                    <apex:inputField value="{!Account.Preferred_Method_of_Contact__c}" label="Can we contact you by phone, email and post?"/>
                    <apex:inputField value="{!Account.Best_time_to_contact__c}" label="When is the best time to contact you by phone should we need to?"/>                    
                    </apex:pageBlockSection>                                    
                    <apex:pageBlockSection columns="1">
                    <apex:inputField value="{!Account.Best_Number_for_Contact__c}" label="What is the best phone number to reach you on?"/>
                    <apex:inputField value="{!Account.Permission_to_Text__c}" label="Are you happy to receive text updates from us as we progress your case?"/>   
                    <apex:inputField value="{!Account.Special_Communication_Requirement_Detail__c}" label="What are the details of those special requirements?"/>             
                    </apex:pageBlockSection>
                    </apex:pageBlockSection>
                    </apex:pageblockSection>             
            </apex:pageblock>
            
<!-- Professional Services Block  this is a different object brought it via the extension-->
            <apex:pageBlock title="Professional Services" tabStyle="Professional_Services__c">
            <div align="center" draggable="false" >
            <apex:commandButton action="{!newProfServ}" value="New Professional Service" rendered="{!NOT(ISBLANK(Account.id))}" rerender="ProfServList"/>     
            </div>
            <apex:outputPanel id="ProfServList"> 
                <apex:repeat value="{!ProfServ}" var="pserv" >
                    <apex:pageBlockSection columns="1"  title="Professional Services {!pserv.Name}" collapsible="true">
                        <apex:pageBlockSectionItem >
                              <apex:pageBlockSection columns="2">
                              <apex:pageBlockSection columns="1">
                                <apex:outputField value="{!pserv.Client__c}"/>
                                <apex:inputField value="{!pserv.Joint_Client__c}"/>
                                <apex:inputField value="{!pserv.Type__c}" label="What Service do they provide?"/>
                                </apex:pageBlockSection>
                           </apex:pageBlockSectionItem>
                           <apex:commandButton value="Delete Professional Service" action="{!deleteProfServ}" rerender="ProfServList">
                           <apex:param name="ProfServIdent" value="{!pserv.id}" assignTo="{!chosenProfServiceId}"/>
                           </apex:commandButton>
                        </apex:pageBlockSection>
                </apex:repeat>
            </apex:outputPanel>
            <div align="center" draggable="false" >
            <apex:commandButton action="{!newProfServ}" value="New Professional Service" rendered="{!NOT(ISBLANK(Account.id))}" rerender="ProfServList"/>     
            </div>
            </apex:pageBlock>

<!-- Bottom Command Buttons -->             
             <apex:pageBlock mode="mainDetail">
            <apex:pageBlockButtons location="Top" >
            <apex:commandButton action="{!save}" value="Save Changes" />
            </apex:pageBlockButtons>
        </apex:pageBlock>     
    </apex:form>        
</apex:pageBlock>  
</apex:page>