'Javascript event listener - wait for page update after event and then execute

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?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source