1

I have a long form, and the client have to scroll vertically the screen to see all fields.

But, every time one of those components with the property update=@form is fired, the screen get back to the top position.

So, the question is:

  • There is a way to keep the scroll bar in the same position after an update=@form ?

Important: The scroll bar back to the top only in the first update=@form, after that, the screen keeps the current position.

I am not sure if it's a bug or I am doing something wrong that is causing that behavior.

And yes, i really have to update the whole form

e.g.

<p:commandButton id="btnVerifyLogin" update="@form" value="Verify" 
    actionListener="#{demandController.VerifyLogin()} />
Pellizon
  • 1,365
  • 2
  • 12
  • 26

1 Answers1

1

I had this issue before, where I had to update the whole form.

What I have learned that when I update the form containing the button that has been pressed (like your Verify button), the browser somehow loses the focus on that button and just scroll back to the top.

I came up with a workaround.

<p:commandButton id="btnVerifyLogin" 
                 update="@(form :not(#formId\\:btnVerifyLogin))" 
                 value="Verify" 
                 actionListener="#{demandController.VerifyLogin()} />

Basically I update the form but not the button, this way the browser keeps the scroll as it is.

Others would suggest that onstart we can call var scroll = $(window).scrollTop(); in order to preserve our scroll position, and oncomplete we call $("html").scrollTop(scroll);, but this won't work since the oncomplete won't be triggered since the button is updated inside the form!

Again this will work only with Primefaces 4, and recently I avoid updating full forms, I prefer to use selectors.

Hope this helps.

Hatem Alimam
  • 9,968
  • 4
  • 44
  • 56
  • 1
    Thank you Hatem! Your reply didn't worked as expected, but it led me to the solution. What i had to do was exclude the update of the parent document, which was "stealing" the focus. This question also helped me: http://stackoverflow.com/questions/15790160/primefaces-selectors-how-to-exclude-some-components-when-updating-the-closest-f – Pellizon Jan 22 '14 at 13:02
  • Maybe my testing page hierarchy is competently different.. that's why my trick worked :) @Pellizon – Hatem Alimam Jan 22 '14 at 13:06