Q:

How to scroll to bottom of a JSF component after update?

I have a log that needs to be tailed in real-time:
        <h:panelGroup layout="block" style="width:100%; max-height: 400px; overflow: auto;" id="log" styleClass="logArea">
            <h:outputText value="#{myBean.log}" style="white-space:pre;"></h:outputText>
        </h:panelGroup>
        <h:outputScript>
        function scrollLog() {var log=jQuery('.logArea');log.scrollTop(log.scrollHeight-log.height);};</h:outputScript>
        <p:remoteCommand name="getLog" process="@this" update="log" onsuccess="scrollLog();">
        </p:remoteCommand>

While the log output updates just fine after remoteCommand has been run it does not scroll to the bottom. I suspect my scrollLog() is called before partial update is applied, and the update resets scrollbar to the top.
I also tried the following jQuery code:
jQuery( function() { var log=jQuery('.logArea');log.animate({ scrollTop: log.scrollHeight}, 1000); });

but nothing seems to work.
How can I work around this and scroll to the bottom of the log after every update?

A:

The onsuccess handler is invoked directly after the ajax response is successfully retrieved, but before the DOM is updated based on the ajax response.
You want to use oncomplete handler instead.
<p:remoteCommand ... oncomplete="someFunctionWhichNeedsToWorkWithUpdatedDOM()" />

