게시판-코멘트-대댓글 페이지 이동없이 작성하기

thanks to 스케치북..ㅠㅠㅠ)/ 갓갓..

 

1. 자바스크립트 함수 reComment()

// 대댓글 돔 구조 변경
function reComment(doc_srl,cmt_srl,edit_url){
   var o = jQuery('#re_cmt').eq(0);
   o.find('input[name=error_return_url]').val('/'+doc_srl);
   o.find('input[name=mid]').val(current_mid);
   o.find('input[name=document_srl]').val(doc_srl);
   o.appendTo(jQuery('#comment_'+cmt_srl)).fadeIn().find('input[name=parent_srl]').val(cmt_srl);
   o.find('a.wysiwyg').attr('href',edit_url);
   o.find('textarea').focus();
}

..스케치북 게시판 스킨에 board.js에 그대로 있는 소스 가져왔습니다. 스케치북 갓갓...

 

2. _comment.html 

* 대댓글창 불러오기 : 보통 다른 프로그램에서는 ajax로 구현하는데, XE 스킨의 경우에는 ajax로 파일을 불러오는 구조가 아니라, 그걸 파싱해서? 구현하니깐. 기존 스킨의 문법대로 include한 뒤에,
대댓글쓰기폼의 돔 구조를 이동시키는 방식으로 구현을 합니다. (스케치북 센스 짱!)

(그리고 그래야... 일반 textarea의 br 태그 띄어쓰기 구현도 좀 수월해집니다. 이건 저 아래 쪽에서 다시 다루기로 합니다..)
 

각 코멘트에서 댓글 작성하는 부분에서 reComment 함수를 호출합니다.

<button onclick="reComment('{$comment->get('document_srl')}','{$comment->get('comment_srl')}','{getUrl('act','dispBoardReplyComment','comment_srl',$comment->comment_srl)}');return false;">대댓글 이동!</button>

 버튼을 클릭하면 reComment() 함수에서, o.appentTo 부분이 해당 댓글 자리를 찾아서, 

그 자리에 대댓글 쓰기창을 출력해줍니다.

 

3. _read.html

저는 _read.html 파일에서 댓글을 쓰게 했는데, 

별도의 코멘트 쓰기 파일을 인클루드하신 경우에는 해당 파일에서 작성하셔도 됩니다.

원래 댓글 쓰기 창 아래에 하나의 form을 더 추가해줍니다.

<div cond="$rd_idx==0" id="re_cmt">
   <form action="." method="post" onsubmit="return procFilter(this, insert_comment)">
      <input type="hidden" name="mid" value="{$mid}" />
      <input type="hidden" name="document_srl" value="{$oDocument->document_srl}" />
      <input type="text" name="parent_srl" value="{$comment->comment_srl}" />
      <input type="text" name="content"  id="html2" value="" />
      <input type="hidden" name="use_html" value="Y" />
      <textarea id="text2" cols="50" rows="8"></textarea>
      <div cond="!$is_logged">
         <label for="userName">{$lang->writer}</label>
         <input type="text" name="nick_name" id="userName" value="{htmlspecialchars($comment->get('nick_name'))}" />
         <label for="userPw">{$lang->password}</label>
         <input type="password" name="password" id="userPw" />
      </div>
      <input type="submit" onclick="convertbr2();" value="{$lang->cmd_comment_registration}" />
   </form>    
</div>

 

4. convertbr() 함수..

https://opentutorials.org/module/3774/28271

대댓글 쓸 때 textarea에서 쓰니깐 한줄 띄워쓰기 한게 안 먹힙니다. 그래서 위 함수를 추가해줍니다.

convertbr() 함수는 원댓글에 쓰인 함수고, 

대댓글용으로 한개를 더 만들어주었습니다. (더 스마트한 방법이 있으면 댓글로 알려주세요.)

function convertbr2(){
   var str = document.getElementById("text2").value;
   var str = str.replace(/\r\n|\n/g,'<br>');
   document.getElementById('html2').value = str;
}

 

자 그러면 끝난 듯? 싶네요 ^^