개발 Q&A

제목 상위 html에서 하위 html ajax로 호출했을시에 document.ready() 실행되게끔 하는 방법이 뭘까요?
카테고리 JavaScript
글쓴이 일용직노동자 작성시각 2017/04/23 19:38:14
댓글 : 2 추천 : 0 스크랩 : 0 조회수 : 11401   RSS

제가 만드는 프로젝트가 싱글레이아웃 어플리케이션으로 구성되어있어서

상위 html에서 <section id="main"></section> 이 부분에 해당하는 페이지만 교체하는 식입니다.

 var templateName = pageSelect;
               var tmpl_dir = '../assets/static';
               var tmpl_url = tmpl_dir + '/' + templateName + '.html';
               var tmpl_string = '';

               $.ajax({
                   url: tmpl_url,
                   method: 'GET',
                   async: false,
                   dataType : 'html',
                   success: function (data) {
                       tmpl_string = data;
                   }
               });
               console.log('Name :'+ templateName + ' tmpl_dir :' + tmpl_dir + ' tmpl_url :' +tmpl_url);
               this.$content.html(content.render(tmpl_string).el);

이런 코드인데 ajax에서 html 데이터형식으로 호출해서 렌더링하는 방식인데 문제가 이렇게 하니 리다이렉션없이 호출은 되나

document.ready 함수가 작동을 안하네요. 각 페이지마다 함수 기능들이 다른데 어떻게 처리를 해야될까요?

이를테면 main.html이 있으면 book.html이 있고, 해당 book.html에 다른 외부 자바스크립트 파일을 include시켜놓고, ajax를 이용하여 저렇게 호출하니

처음에는 자바스크립트 파일이 동작안하는데 새로고침하니까 돌아가더라구요.

book.html에 <script src="assets/js/reservation.js"></script> 이런식으로 해당 자바스크립트를 인클루드 했을 시에 이놈은 원래 document.ready()로 바로 동작하게끔 되어있는데 그 다이렉션이 이루어지지않아서 해당 함수가 안먹는거같고, 새로고침을 해야지 정상적으로 작동이 되는 상황입니다. 

 다음글 외부서버가 죽었는지 살았는지 확인 할수 있는 방법이나 ... (5)
 이전글 ck 에디터를 이용해서 사진 업로드시 이미지를 imag... (1)

댓글

/ 2017/04/24 16:56:49 / 추천 0
document.ready는 돔이 준비되면 실행되는 메소드라 아마 님이 원하는데로 하시려면 jquery 풀버전 min버전 말고 해킹하셔서 핵하셔야 할거에요.. 간단하게 처리할수 있는 방법은 새로고침이 되면 돔이 새로 그려지니 페이지가 바뀐다면 리로드 메소드로 돔을 새로 그리는 방법이 있겠습니다. 새로 그리지 않기 위해서 위와같은 방법을 구상하셨을텐데, 차라리 해당코드를 document.ready 말고 다른 함수로 따로 빼셔서 돔이 새로 그려질때 호출하게 하면 될거 같습니다.
일용직노동자 / 2017/04/25 10:27:57 / 추천 0
닉// 답변감사합니다. 렌더링하는 함수쪽에 함수를 하나 둬서 그 렌더링이 실제로 이뤄질때 함수호출해서 해결하는 방식으로 생각해봐야겠네요 감사합니다.