Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
DavidGenDavidGen 

reRender Visualforce reset scroll page position

Hi!  

 

When actionSupport component rerender other visualforce components, scrollbar page is reset to top but I would  like to keep position of page.  Any solution?

 

Thanks in advance.

mulvelingmulveling

When you specify a node(s) to rerender, the action is going to clobber everything inside that node just before the completed event (though after beforedomupdate). So you could attach custom javascript to "beforedomupdate", to read/store the scrollTop property (preferrably via jQuery), and the attach more script to "completed" to consume and re-instate that stored value. You could even write a jquery plugin with 2 actions (pushScrollState, popScrollState) to do this for all child "scrollable" containers in a given scope.

 

However, that's not usually the simplest solution -- typically you should first try to avoid clobbering your scrollable in the first place -- then your scoll states will remain unadultered. That means limiting your rerender to nodes that do NOT contain your scrollable (i.e. only rerender child nodes within your scrollable).

 

I have run into issues, writing more complex pages, where it becomes extremely awkward to rely upon rerenders for certain actions, precisely because i does clobber entire DOM subtrees -- sometimes you want to say, add a style class to a node without clobbering it. In those cases, it's best to move the display functionality to the client, abstracting as much of it as you can away into a jQuery plugin.
DavidGenDavidGen

 

Thank you. I'm trying to use the  scrollTop property but  it does not work.

 

<apex:page standardController="CustomObject__c" extensions="customObjectcontroller" showHeader="true">
 <apex:pageMessages id="sms" />
 <script language="javascript">
  // function saves scroll position 
   function pushScrollState(val)
   {  
    var hidScroll = document.getElementById('inField');
    hidScroll.value = val.scrollTop;
   }
  // function moves scroll position to saved value 
  function popScrollState(what)
  { 
   var hidScroll = document.getElementById('inField');
   document.getElementById(what).scrollTop = hidScroll.value;
  } 
 </script>
  <body onload="popScrollState('Scroll');" > 
   <apex:form id="Form">
    <apex:inputField id="inField" value="{!customObject.lookup1__c}" >
     <apex:actionSupport rerender="sms,Form" event="onchange" action="{!inputLookup1}"> 
      <div id="Scroll" onscroll="pushScrollState(this);"/> 
     </apex:actionSupport>
    </apex:inputField>
   </apex:form> 
  </body> 
</apex:page>

 

 

 

 
Alex Skempris9Alex Skempris9
Hi David, 

Has any solution been found to that problem please?

Thanks
Alex