$("#menu1").ready(function() {
$.ajax({
url : "MiniChat.jsp",
success : function(result) {
$("#message1").load('MiniChat.jsp');
/* nice scroll */
$(".chat").niceScroll();
$(".chat").scrollTop($(".chat")[0].scrollHeight);
}
});
});
minichat 개별적으로 실행시에는
$(".chat").scrollTop($(".chat")[0].scrollHeight);
함수가 잘 동작하는것을 확인할 수 있습니다.
현재 제가 chat 버튼을 누르면 minichat.jsp를 ajax로 불러오기를 희망하는 상태입니다 꼭 이렇게 불편함을 감수할 필요는 없지만 제가 꼭 해보고 싶은 방법이라서요
아래부분이 chat부분의 collapse이며 message1 div영역에서 minichat.jsp를 load하는 방식입니다.
<button type="button" id="button" id="menu1" class="btn btn-primary" data-toggle="collapse" data-target="#message1" style="position: absolute; right: 0px; bottom: 0px;">
Chat
</button>
<div id="message1" class="collapse in" >dfafadafa</div>
그렇게 해서 불러오면 페이지 자체는 잘 불러오지만 하단부로 스크롤을 맞추도록하는
$(".chat").scrollTop($(".chat")[0].scrollHeight);
함수가 undefined로 나타납니다.
일단 양쪽의 js나 부트스트랩 버전등은 맞춰둔 상태이며 둘이 딱히 충돌하는 부분은 없는것같아 보입니다.
구글링을 해보았지만 딱히 해답을 찾기 어려워 질문드립니다. 혹시 조금더 효율적인 ajax 페이지 호출 방
법이나 지적을 해주신다면 감사히 듣겠습니다.
Uncaught TypeError: Cannot read property 'scrollHeight' of undefined
at Object.success (JspLoadTest.jsp:38)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at k (jquery.min.js:2)
at XMLHttpRequest.<anonymous> (jquery.min.js:2)