라이믹스 2.0 새로고침 없는 댓글 예제

rx_ajax_comment.html

<!-- 폼에 rx_ajax 클래스를 추가하면 새로고침 없이 AJAX로 제출됩니다. -->
<!-- 제출 완료후 호출하기를 원하는 함수명을 data-callback-success 속성에 지정합니다. -->
<!-- 나머지는 라이믹스 코어가 알아서 합니다. -->
<form action="./" method="POST" class="rx_ajax" data-callback-success="refreshComments">
	<!-- 댓글 작성을 위해 기본적으로 전송해야 하는 내용들 -->
	<input type="hidden" name="mid" value="{$mid}" />
	<input type="hidden" name="act" value="procBoardInsertComment" />
	<input type="hidden" name="document_srl" value="{$oDocument->document_srl}" />
	<!-- 내용을 에디터로 입력받거나 파일 업로드를 넣는 것은 숙제로 남겨둘게요.^^ -->
	<textarea name="content" placeholder="댓글 내용"></textarea>
	<button type="submit">제출</button>
</form>

<script>
// AJAX 제출 성공시 이 함수가 자동으로 호출됩니다. 위에서 이름 적었으니까요.
function refreshComments(data) {
	// 새로 입력한 댓글의 고유번호입니다.
	// 댓글 영역 새로고침 후 해당 댓글을 하이라이트 처리하는 등, 필요에 따라 사용하세요.
	var comment_srl = data.comment_srl;
	// 사용하시는 스킨에서 댓글 영역에 해당하는 선택자(id, class 등)를 여기에 넣어야 합니다.
	var selector = '#comment';
	// 이 예제는 페이지 전체를 새로고침하는 방식이므로, 불필요한 데이터를 많이 불러오지 않도록 레이아웃을 제외합니다.
	// 스킨에 따라서는 일부분만 다시 불러오는 등 다양한 트릭이 가능할 수 있습니다.
	var refresh_url = current_url.setQuery('layout', 'none');
	// 현재 화면을 백그라운드에서 새로고침한 후...
	$.get(refresh_url, function(response) {
		// 기존 페이지에서 댓글 영역을 찾고...
		var old_comment_area = $(selector);
		// 새로고침된 페이지에서도 댓글 영역을 찾아서...
		var new_comment_area = $(response).find(selector);
		// 기존 댓글 영역을 새 것으로 바꿔치기합니다!
		old_comment_area.empty().append(new_comment_area.contents());
	});
}
</script>