0

I have an xhtml page with a set of panels stacked one above the other. Each panel has a datatable with a particular column as a hyperlink. When I click on the hyperlink in the first data table, the second datatable is rendered. When I click on the hyperlink in the second datatable, the third datatable is rendered. I wanted my page to scroll down and display the newly rendered datatable in the center of the screen and not load the page back to the top of the screen. How can I achieve it. below is the code that I have written to achieve that, but with no luck.

Each of the hyperlink in the table has the following code written,

<p:commandLink value="#{abc}" action="#{myBean.myFunction}" 
        ajax="false" oncomplete="focusPanel3()">
    <f:setPropertyActionListener  
        target="#{myBean.xyz}" value="#{abc}">
    </f:setPropertyActionListener>
</p:commandLink>

The javascript is as follows

function focusPanel3() {
        var el = document.getElementById("panel3");
        el.scrollIntoView();
        window.scroll(0, 1200); //Also tried this line. No luck even then
}

In my Bean, i am setting the rendered attribute of the next panel to true.

Adarsh
  • 3,413
  • 1
  • 17
  • 35

1 Answers1

1

You can check jQuery smooth scroll out, this answer can guide you. Or jQuery scrollTo plugin and this answer includes a basic demo as well. Do not forget giving the correct HTML generated cliend ID when you are using document.getElementById.

Community
  • 1
  • 1
Ömer Faruk Almalı
  • 3,692
  • 6
  • 34
  • 62