리스트에서 내용으로 이동시 데이터 동적 생성 > jquery

제목 참 어렵다.

우선 무슨  말인고 하니 리스트뷰가 동적으로 생성 되면(ajax 방식으로 json 등으로 데이터 받아 와서 동적 생성 이건 자료 많다 찾아 보자..) 생성된 리스트를 클릭 해서 상세페이지로 이동 하는 간단한 게시판의 형태를 취할때 링크를 ajax 방식으로 할 경우 어찌 해야 할것인지... 아무리 찾아 봐도(내가 구글신하고 안친한가?) 다들 리스트만 동적으로 생성 하고 그 리스트에서 상세로 넘어 갈때 어찌 해야 하는지 답이 없다.

그런데 그걸 만들어 내는 사람은 꽤 되는거 보면 내가 못하는거겠지..

어째건 나같은 어리석은 사람을 위해 정리를 해 보겠다.

물론 방법은 여러가지가 있을 것이고, 내가 정리하는 방법이 최선이다 라고 말할 수는 없겠지만, 이런 방법도 있다 정도만 알아 두면 좋을 것이다.

우선 페이지 구성을 해야 한다.

<!-- 게시판 리스트를 구성 -->

<div data-role="page" id="board01">

<div data-role="content">

<ul data-role="listview" id="notice_list">

<li><a href="#board02" bid="1">공지사항첫번째 제목</a></li>

<li><a href="#board02" bid="2">공지사항두번째 제목</a></li>

<li><a href="#board02" bid="3">공지사항세번째 제목</a></li>

</ul>

</div>

</div>

<!--게시판 상세페이지-->

<div data-role="page" id="board02">

<div data-role="content">

<div id="boardContent"></div>

</div>

</div>

자 이건 한페이지에 만드는거 눈치 챘을 테고

그럼 저 리스트에서 상세로 넘어 갈때 링크에 따른 값을 물고 가야 하는데 get 방식의 파라메타 형식은 못취하는거 당연하고, 그럼 어찌 해야하는가?

이제 자바스크립트 부분을 구성해 보자.

$("#board01 #notice_list a").click(function() {

var bid = $(this).attr("bid");

$.getJSON("http://mysite.com/jsonptest.php?callbak=?",{bid:bid},function(data) {

//data 로 받은 값을 처리 하면 된다. 값은 JSON 형태 이다. 대략 subject,content 형태로 구성 되었다고 보자.

var content = "";

$("#board02 #boardContent").html(data.content);

});

});

쉽지 않은가?

하지만 단점이 있다. 새로고침을 하면 데이터가 안보인다. 당연하겠지.. 상세 페이지에 들어 올때 값을 물고 와야 하는데 새로고침 하면 물고올 값이 없으니

그때를 대비해서

$("#board02").live("pageShow",function(event,ui) {

if($("#boardContent",this).html() == "") {

alert("잘못된 접근 입니다.");

$.mobile.changePage("#board01");

}

});

이렇게 내용이 없으면 리스트 페이지로 가라는 대비책을 둔다.

대략 구조는 이렇게 되고, 응용은 각자의 몫이다.