cjLee
30
2018-12-07 15:25:30
4
102
#529661 Tech Q&A html javascript css bootstrap

ajax로 div영역에 페이지 호출 중 scrollheight가 undefined로 나오는 현상 아시는분 계신가요..? 


$("#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)


0
0

  • 답변 4

  • ktsedd
    6k
    2018-12-07 15:29:44

    $(".chat").scrollTop($(".chat")[0].scrollHeight);

    직전까지 개발자도구로 디버깅 걸어보심이
    어떤값이 잡히는지 확인해보세요

    0
  • cjLee
    30
    2018-12-07 15:45:21 


    $(".chat").scrollTop($(".chat")[0].scrollHeight);
//이부분은 공통적으로 minichat.jsp와 불러오는 페이지에서 잡히고
r.fn.init(2) [div#minichat.col-inside-lg.decor-default.chat, div.col-sm-5.col-xs-12.chat, prevObject: r.fn.init(1)]
0: div#minichat.col-inside-lg.decor-default.chat
1: div.col-sm-5.col-xs-12.chat
length: 2
prevObject: r.fn.init [document]
__proto__: Object(0)


$("#message1").load('MiniChat.jsp');
//이부분에서 minichat.jsp를 불러옵니다.
r.fn.init [div#message1.collapse.in]
0: div#message1.collapse.in
length: 1
__proto__: Object(0)

    .chat앞에 minichat에서 나오는 #message도 같이 태그를 걸어줘야할까요?

    0
  • kiroki
    169
    2018-12-07 16:06:48

    추측인데요 만약 Minichat.jsp 안에 .chat 이 있고

    해당 jsp를 append하기 전에 $('.chat')를 찾는데

    아직 엘리먼트가 없는 상황이라 $('.chat')의 length는 0이고

    따라서 $('.chat')[0]이 undefined 인게 아닐까요?


    확실한건 console.log($('.chat')); 로
    찍어봐야 알 것 같네요

    0
  • cjLee
    30
    2018-12-07 16:26:02

    답변 감사합니다 일단 해결했습니다!  아무래도 kiroki님 말씀이 맞는거같네요

    모든 스크립트를 minichat.jsp 쪽에 스크립트를 상단에서 작성하였었는데  안되서 테스트중에

    minichat쪽의 $(".chat").scrollTop($(".chat")[0].scrollHeight); 를 지우고

    호출페이지에서 scrollheight 함수를 추가했었는데 그냥 minichat쪽에서 scrollheight 함수를 다시 추가하고 스크립트들을  /body 쪽으로 내리니  정상 동작하였습니다.

    스크립트가 도는 방식을 제대로 이해 못한게 잘못이었던 것 같습니다.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.