0

I'm working on a web project where on one page, I have a paginated JSF datatable. As a default, it has 12 rows - now when I select another amount, like 20, per dropdown box, more table rows are shown and the dropdown box at the bottom of the table scrolls out of view. I want to scroll it back into view for better user experience.

What I managed was implementing some event listener that gets fired whenever a selection from the dropdown gets chosen:

selector.onchange = updateView;

function updateView(e) {
    var selector = document.getElementById(e.target.id);
    selector.scrollIntoView();
}

However, this happens immediately after selecting something, while it takes a few 100 miliseconds for the table to reload. What's the best way to scroll to the dropdown box only after all rows are loaded properly?

Noel93
  • 135
  • 11
  • Where's the code that loads the rows? The scrolling needs to go in there obviously. –  Feb 28 '22 at 10:10
  • JSF gets its table data from a Java method ```load()```. I can't simply do the scrolling there though, since this would trigger everytime the table is loaded, not only when the rows-per-page dropdown is clicked. Clicking it isn't triggering a dedicated method, it's just changing the params to the ```load()``` method. – Noel93 Feb 28 '22 at 11:09
  • As a quick and dirty fix you can also do the scrolling inside a setTimeout callback. Or you can use an observer that triggers when the height of the table changes. –  Feb 28 '22 at 11:51
  • Does this answer your question? [Execute JavaScript before and after the f:ajax listener is invoked](https://stackoverflow.com/questions/24912335/execute-javascript-before-and-after-the-fajax-listener-is-invoked) – Jasper de Vries Feb 28 '22 at 12:25

0 Answers0