2013-06-03 5 views
1

나는 실시간으로 꼬리해야하는 로그가 있습니다 업데이트 후 JSF 구성 요소의 맨 아래로 스크롤하는 방법은 무엇입니까?

 <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> 

remoteCommand이 실행 된 후 잘 로그 출력 업데이트가 아래로 스크롤하지 않지만

. 부분 업데이트가 적용되기 전에 scrollLog()가 호출되고 업데이트가 스크롤바를 맨 위로 재설정합니다.

은 또한 다음과 같은 jQuery 코드 시도 :

jQuery(function() { var log=jQuery('.logArea');log.animate({ scrollTop: log.scrollHeight}, 1000); }); 

을하지만 아무것도 작동하는 것 같다 없습니다.

이 문제를 해결하고 업데이트 할 때마다 로그 맨 아래로 스크롤 할 수 있습니까?

+0

작동해야합니다 ...이 비슷한 질문을 보았습니까? http://stackoverflow.com/questions/12430546/primeface-datatable-scrollbar-at-desired-position –

+0

고객 측 특정 질문이 있습니다. JSF는이 질문의 맥락에서 HTML 코드 생성기이므로 구체적인 문제와 관련이 없습니다 (예 : PHP, ASP 또는 JSF 대신에 사용하는 것과 똑같은 문제가있었습니다). 따라서 클라이언트 측 (HTML/JS/jQuery) 전문가가 질문에서 JSF 부분을 생략하면 질문을 이해하고 대답하는 것이 더 쉽습니다. 나는. JSF가 생성 한 HTML 출력 만 게시하면된다. (가능하다면 간단한 바닐라'.html' 파일에서 테스트 한 간단한 형식으로). – BalusC

+0

@BalusC 부분적으로 동의합니다. 내가 사용하는 JS 코드 (또는 @better_use_mkstemp가 제안한 코드)는 독자적으로 작동합니다. 그러나 DOM 트리는 PF 클라이언트 측 라이브러리에 의해 업데이트되며 내 JS 코드가 실행 된 후 스크롤 위치가 다시 설정되는 것 같습니다. 따라서 질문 ... – rootkit

답변

1

onsuccess 핸들러는 DOM은 아약스 응답에 따라 업데이트 전에 아약스 응답이 성공적으로 검색되어 직접 후 하지만 입니다 호출됩니다.

대신 oncomplete 처리기를 사용하고 싶습니다.

<p:remoteCommand ... oncomplete="someFunctionWhichNeedsToWorkWithUpdatedDOM()" /> 
+0

완벽하게 일했습니다! 감사! – rootkit

관련 문제