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.