Solution for : Not firing 'document ready event' When jquery load()

< 핵심은 마지막에 있으니 급한 분은 마지막 부분을 보세요 

  ( You are Urgent?  Solution is in the last.  Scroll Down Powerfully!! ) >

바쁘지만... 요거는 기록해두고 넘어가자....

script로 html 을 많이... 제어하는 프로젝트를 진행하고 있다. 

이런 html view단 작업 경험이 미천한 나로서는 어렵기도 하고, 매우 귀찮기도 하다.

kendo ui 를 이용하고 있는데, api 설명이 너무 부족하기도 하고... 그래서 삽질이 많다.

피할수 없다면 즐겨라... 조용필 형님의 19집을 들으면서 마인트 콘트롤을 하면서 하고 있다.

암튼 또 대박인 것이 개발 다 했는데 view단 제어 방식을 변경하던가 하면 뭐 완전 새로 개발이다.

제어 방식을 바꿔야 하는 상황이 또 조장되어... 그걸 요 며칠하고 있다가... 삽질한 것을 정리해본다.

1) kendo grid 를 보여주는 리스트 화면

2) 클릭해서 상세화면으로 이동

3) 다시 목록으로 이동 

3) 을 구현한 방식은 jquery load() 를 이용하였는데, load 하는 url 페이지가 load 되어도

document ready 가 수행되지 않아서 빈 그리드만 보이는 것이다.

■ 조치 1

javascript 변수로 grid 를 담아서 그리던 것을 바로 해당 grid 개체를 잡아서 그리는 방식으로 변경

-> 이게 원인이 아닌데 한 것이므로 효과 없음. 핵심은 ready 가 수행안되는게 문제임.

■ 조치 2

script 를 이용하지 않고 jsp 상에서 grid 바로 그리는 것을 시도.

kendo 사이트대로 하려는데 어찌된게 tag library 넣으면 에러가 남... 그래서 접음...

이거 넣음 에러 : <%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>

서버단 에러 메시지 : org.apache.jasper.JasperException: The absolute uri: http://www.kendoui.com/jsp/tags cannot be resolved in either web.xml or the jar files deployed with this application

■ 조치 3

js 로 분리되어있던 스크립트를 jsp 에 삽입.

허나 그리드 그리는 코드중 kendo datasource 값 태그가 jsp 와 쫑나면서 값이 안나옴.

{

field: "albm_nm",

width: 400,

title: "앨범명",

template: "<a href='' onclick='phtAlbmList.onShow(\"${phto_albm_seq}\"); return false;'>${albm_nm}</a>"

,headerAttributes: { style: "text-align: center"}

}

이 경험은 list view에서도 했었는데... 그때는 #:필드명# 으로 하니 되었는데... 여기선 안 먹음...

■ 조치 4 < Solution >

처음 개발을 이런 제어를 하는 것이면 괜찮은데 다 했던걸 여러번 고치는 상황이 오고, 잘 되지도 않으니 짜증이 많이 남.

도대체 load 가 뭔지 들여다 봄.

▶ ▶ jqeury 중 Ajax 카테고리에 있는 놈이다. 그러다보니 call back 을 쓸수가 있다!

http://api.jquery.com/load/

Callback Function

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

1 2 3

$('#result').load('ajax/test.html', function() { alert('Load was performed.'); });

In the two examples above, if the current document does not contain an element with an ID of "result," the .load() method is not executed.

그래서 적용하였더니 잘된다.

$("#wsCwContentBx").load(loadUrl, function(){

phtAlbmList.makeGrid();

});

▶ ▶ 그럼 document ready 는 왜 안먹었던건가? 

http://api.jquery.com/ready/

DOM 이 완전히 로딩되면 이벤트가 발생한다는거 같은데...

영역에 ajax load 를 통해 리스트 페이지 DOM 생성하고, 

해당 영역에 다시 상세 페이지 DOM 생성하고, 

다시 리스트 페이지를 load 할때는... ( 지금부터 내 추측이다 )

뭔가 브라우저에서 기억하고 있던 것이 있어서 완전히 full로 로드할 필요가 없고, 부분적으로만 로딩하기 때문에

document ready 이벤트를 안타는거 같다.

.empty() 를 하고 .load() 를 했었을때도 안되었으니까.... empty 한다고 DOM 기억하던거 까지 지우지는 못하는거 같다...

DOM 에 대해 간단히 정리해보면...

DOM 은 Document Object Model 의 약자.

html xml Object 에 대한 API 로... javascript, jquery 에서 html object 제어하는 코드를 기술해놓으면

해당 스크립트를 통해 브라우저에서는 내부적으로 DOM 을 이용해 html object 를 제어한다고 이해하면 될 듯