[SalesForce] When Error message comes on VF page the page should scroll up automatically

I am trying to save table on my visualforce page. If some error message comes while saving the page should automatically move up to error(Error message is displayed on top of page).

Note: There are many rows in table.

<apex:page controller="Controller1" id="pg"  cache="true" doctype="html-5.0">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js" />
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" />
  <apex:form id="form1">

      <apex:pageMessages id="Showmsg">
      </apex:pageMessages> 

     <apex:actionstatus id="load">
            <apex:facet name="start">
                <div class="waitingSearchDiv" id="el_loading" style="position:fixed;z-index:999999;background-color: #fbfbfb; height: 100%; opacity: 0.65; width: 100%;">
                    <div class="waitingHolder" style="top: 74.2px;">
                        <img class="waitingImage" src="/img/loading.gif"
                             title="Please Wait..." /> 
                         <span class="waitingDescription">
                            Please Wait...
                         </span> 
                    </div>
                </div> 
            </apex:facet>
     </apex:actionstatus>

    <apex:outputPanel id="filters">
      <div Class="filterdiv" id="filtersection">
          Period &nbsp;&nbsp; &nbsp;&nbsp;
          <apex:outputPanel id="period">
          <apex:selectList value="{!selectedPeriod}" multiselect="false" size="1" styleClass="notes-text-box-med-small">         
                  <apex:selectOptions value="{!periodList}"/>


          </apex:selectList>
          </apex:outputPanel>
          &nbsp;&nbsp;&nbsp;
          BU &nbsp; &nbsp;&nbsp;

          <apex:outputPanel id="BU">
          <apex:selectList value="{!selectedBU}" multiselect="false" size="1" styleClass="notes-text-box-med-small">         


              <apex:selectOptions value="{!buList}"/>
              <apex:actionSupport rerender="GAtable,filters,buttons,footer,noresult,detailcomnt,CumulativeDiff" event="onchange"  action="{!showRoleListFilter}" status="load"/>
          </apex:selectList>
          </apex:outputPanel>
          &nbsp;&nbsp;&nbsp;

          Role &nbsp; &nbsp;&nbsp;
          <apex:outputPanel id="roles">
          <apex:selectList value="{!selectedRole}" multiselect="false" size="1" styleClass="notes-text-box-med-small">

              <apex:selectOptions value="{!rolesList}"/>
              <apex:actionSupport rerender="GAtable,filters,buttons,footer,noresult,detailcomnt,CumulativeDiff" event="onchange" action="{!showProductListFilter}" status="load"/>
          </apex:selectList>
          </apex:outputPanel>
             &nbsp;&nbsp;&nbsp;
             Product &nbsp; &nbsp;&nbsp;
           <apex:outputPanel id="product">
          <apex:selectList value="{!selectedProduct}" multiselect="false" size="1" styleClass="notes-text-box-med-small">
            <apex:actionSupport rerender="filters,GAtable" event="onchange" status="load"/>
            <apex:selectOptions value="{!productsList}"/>
            <apex:actionSupport event="onchange" action="{!searchValuesBasedOnFilters}" rerender="GAtable,filters,buttons,footer,noresult,detailcomnt,CumulativeDiff" status="load"/>
          </apex:selectList>
          </apex:outputPanel>
          &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
       <!--   <apex:commandButton value="Search" action="{!searchValuesBasedOnFilters}" rerender="tablesection,GAtable,filters,buttons,footer,noresult,detailcomnt,CumulativeDiff" status="load"/> -->

          <div style="text-align:right;width:100%;margin-top:-23px;">
          <apex:outputPanel id="CumulativeDiff" rendered="{!if(toShowCumulativeDiff==true,true,false)}"> 

              <apex:outputLabel id="cd1" value="Cumulative Difference:" rendered="{!if(toShowCumulativeDiff==true,true,false)}"/> &nbsp;
              <apex:outputText value="{!unit1}"/>
                <b class="cumulativeDifference">
                <apex:outputText id="CumulativeDifference" value="{0, number, ###,###,###,###.##}">
                    <apex:param value="{!Round(cumulativeDiff,2)}"/> 
                </apex:outputText></b>
          </apex:outputPanel>
          </div>
       </div>
     </apex:outputPanel>

     <div id="tablesection">
     <apex:outputPanel id="GAtable">
     <table cellpadding="0" cellspacing="0" id="mainTable"  class="table-example">
         <apex:variable value="{!0}" var="rowNum"/>
                                        <thead> 
                                            <tr>
                                                <th>Location Name</th>

                                                <th>Comments</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                          <apex:repeat value="{!showLstBasedOnFilters}" var="v" id="rpt">
                                           <tr>

                                               <td Class="Difference">
                                               <b>{!unit1}</b>
                                               <apex:outputText id="Difference"  value="{0, number, ###,###,###,###.##}"> 
                                                   <apex:param value="{!Round(v.Difference__c,2)}"/> 
                                               </apex:outputText>
                                               </td>

                                               <td>
                                               <apex:inputtextarea id="Comments1" value="{!v.Comment__c}" rendered="{!!status}" cols="20" rows="2" html-maxlength="10" />
                                               <apex:inputtextarea id="Comments2" value="{!v.Comment__c}" rendered="{!status}" cols="20" rows="2" html-maxlength="10" readOnly="true" />
                                               </td>
                                           </tr>

                                          </apex:repeat>
                                        </tbody>

     </table></apex:form>
</apex:page>

Best Answer

You can use combination of oncomplete event of <apex:commandButton and jQuery scrollTop function to achieve this. You have to check if the error message element contains the error. If yes scroll to top of the page. For better UX you can use jQuery animate function to slow down the scroll speed.

<apex:page>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <apex:form >
    <apex:pageMessages id="Showmsg"/>
    .....
    .....
    <apex:commandButton reRender="pgbtable,Showmsg" value="Save" action="{!getresult}" oncomplete="complete();" />
    .....
    .....
    <apex:outputPanel id="pgbtable">
    </apex:outputPanel>
    .....
    .....
  <apex:form >
      <script>
        function complete() {
            if($.trim($('[id$=Showmsg]').html())!='') {
                 $("html, body").animate({ scrollTop: 0 }, "slow");
            }
        }
      </script>
</apex:page>
Related Topic