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
<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>
BU
<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>
Role
<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>
Product
<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>
<!-- <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)}"/>
<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
andjQuery 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 jQueryanimate
function to slow down the scroll speed.