4

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>
  • Can you please post the VF page code? – Saroj Bera Feb 3 '17 at 5:58
  • I have posted my vf page. – Jill_sfdc Feb 3 '17 at 6:03
4

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>
| improve this answer | |
2

I am assuming you want to scroll to top if any error occurs on the Save button.

So you will need a property in your apex controller which will act as a flag of whether any error occurred during operation.

public Boolean errorOccurred{get;set;}

and in your save function, you can set this variable to true when any error occurs.

public PageReference save()
{
    ....
    errorOccurred = true;
    ...
}

Next, modify your commandButton to have a oncomplete attribute.

<apex:commandButton value="Save" action="{!save}" rerender="GAtable,CumulativeDifference,NoResultfnd,detailcomnt,buttons,footer,Showmsg,CumulativeDiff,jsCode" onclick="if(!confirm('Are you sure you want to Save?')){return false};" disabled="{!status}" status="load" oncomplete="scrollIfError();"/>

Your scrollIfError function:

<script>
function scrollIfError()
{
    if('{!errorOccurred}' == true)
    {
        window.scrollTo(0,0);
    }
}
</script>

You should be good to go.

| improve this answer | |
  • Santanu, <apex:pageMessages creates a HTML span element and it is present in the page irrespective of whether there is an error or not. So you don't have to specifically set any Apex variable for this, you can just check if the error element is empty or not to take any action in JavaScript. – Saroj Bera Feb 3 '17 at 7:29
1

Yes, you can do this using JavaScript on your visualforce page.Take a Boolean variable in your apex controller, If any error comes then assign True value for this variable.And according to the value of Boolean variable You can perform action or scroll page to top when error comes.

Here is the sample of code:- <script> function ScrollToTop(){ var error=''; error='{!errorDetector}'; if(error == 'true'){ window.scrollTo(0,0); }else{ window.scrollTo(0,document.body.scrollHeight); } } </script>

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.